Skip to content

Commit

Permalink
Improved performance;
Browse files Browse the repository at this point in the history 
Fixed bug with native scrollbars displayed when scrolling not needed;
  • Loading branch information
@xobotyi
xobotyi committed Oct 18, 2018
1 parent dd5a1fb commit 996d7c9
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 21 deletions.
34 changes: 23 additions & 11 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,20 +337,31 @@ function (_React$Component) {
}
}

_this.isRtl = _this.props.rtl || _this.isRtl || (rtlAutodetect ? getComputedStyle(_this.content).direction === "rtl" : false);
var verticalScrollNotBlocked = !_this.props.noScroll && !_this.props.noScrollY,
horizontalScrollNotBlocked = !_this.props.noScroll && !_this.props.noScrollX,
verticalScrollPossible = verticalScrollNotBlocked && _this.content.scrollHeight > _this.content.clientHeight,
horizontalScrollPossible = horizontalScrollNotBlocked && _this.content.scrollWidth > _this.content.clientWidth;
var isRtl = _this.props.rtl;
!(0, _utilities.isset)(isRtl) && (isRtl = rtlAutodetect ? getComputedStyle(_this.content).direction === "rtl" : _this.isRtl || false);

_this.holder.classList.toggle("ScrollbarsCustom-RTL", _this.isRtl);
if (forced || _this.isRtl !== isRtl) {
_this.holder.classList.toggle("ScrollbarsCustom-RTL", isRtl);

var verticalScrollPossible = _this.content.scrollHeight > _this.content.clientHeight && !_this.props.noScroll && !_this.props.noScrollY,
horizontalScrollPossible = _this.content.scrollWidth > _this.content.clientWidth && !_this.props.noScroll && !_this.props.noScrollX;
_this.isRtl = isRtl;
}

if (verticalScrollPossible && (_this.previousScrollValues || true || _this.isRtl !== (_this.previousScrollValues.rtl || false))) {
if (forced) {
var browserScrollbarWidth = (0, _utilities.getScrollbarWidth)(),
fallbackScrollbarWidth = _this.props.fallbackScrollbarWidth;
_this.content.style.marginLeft = _this.isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
_this.content.style.paddingLeft = _this.isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
_this.content.style.marginRight = _this.isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
_this.content.style.paddingRight = _this.isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";

if (verticalScrollNotBlocked) {
_this.content.style.marginLeft = isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
_this.content.style.paddingLeft = isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
_this.content.style.marginRight = isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
_this.content.style.paddingRight = isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
} else {
_this.content.style.marginLeft = _this.content.style.paddingLeft = _this.content.style.marginRight = _this.content.style.paddingRight = null;
}
}

_this.trackVertical.style.display = verticalScrollPossible || _this.props.permanentScrollbars || _this.props.permanentScrollbarY ? null : "none";
Expand Down Expand Up @@ -395,8 +406,7 @@ function (_React$Component) {
scrollHeight: _this.content.scrollHeight,
scrollWidth: _this.content.scrollWidth,
clientHeight: _this.content.clientHeight,
clientWidth: _this.content.clientWidth,
rtl: _this.props.rtl
clientWidth: _this.content.clientWidth
};
(_this.previousScrollValues || false) && _this.props.onScroll && _this.props.onScroll(currentScrollValues, _assertThisInitialized(_assertThisInitialized(_this)));
_this.previousScrollValues = currentScrollValues;
Expand All @@ -409,6 +419,8 @@ function (_React$Component) {
_createClass(Scrollbar, [{
key: "componentDidMount",
value: function componentDidMount() {
this.isRtl = null;

_LoopController.default.registerScrollbar(this);

this.addListeners();
Expand Down
9 changes: 9 additions & 0 deletions examples/app/components/blocks/SandboxBlock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default class SandboxBlock extends React.Component
this.togglePermanentTrackY = this.togglePermanentTrackY.bind(this);
this.togglePermanentTrackX = this.togglePermanentTrackX.bind(this);
this.handleAddParagraphClick = this.handleAddParagraphClick.bind(this);
this.handleRemoveParagraphClick = this.handleRemoveParagraphClick.bind(this);
this.handleRandomPositionClick = this.handleRandomPositionClick.bind(this);
this.handleScrollTopClick = this.handleScrollTopClick.bind(this);
this.handleScrollBottomClick = this.handleScrollBottomClick.bind(this);
Expand Down Expand Up @@ -108,6 +109,13 @@ export default class SandboxBlock extends React.Component
});
}

handleRemoveParagraphClick() {
this.setState({
...this.state,
paragraphsCount: Math.max(0, this.state.paragraphsCount - 1),
});
}

handleRandomPositionClick() {
this.scrollbar.scrollTop = Math.floor(Math.random() * (this.scrollbar.scrollHeight + 1));
this.scrollbar.scrollLeft = Math.floor(Math.random() * (this.scrollbar.scrollWidth + 1));
Expand Down Expand Up @@ -152,6 +160,7 @@ export default class SandboxBlock extends React.Component
<div className="button" key="scrollRight" onClick={ this.handleScrollRightClick }>Scroll right</div>
<br />
<div className="button" key="addParagraph" onClick={ this.handleAddParagraphClick }>Add paragraph</div>
{ !!this.state.paragraphsCount && <div className="button" key="removeParagraph" onClick={ this.handleRemoveParagraphClick }>Remove paragraph</div> }
</div>
<div className="content" style={ {height: 280} }>
<Scrollbar
Expand Down
36 changes: 26 additions & 10 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ export default class Scrollbar extends React.Component
};

componentDidMount() {
this.isRtl = null;
LoopController.registerScrollbar(this);

this.addListeners();
Expand Down Expand Up @@ -515,21 +516,37 @@ export default class Scrollbar extends React.Component
}
}

this.isRtl = this.props.rtl || this.isRtl || (rtlAutodetect ? getComputedStyle(this.content).direction === "rtl" : false);
const verticalScrollNotBlocked = !this.props.noScroll && !this.props.noScrollY,
horizontalScrollNotBlocked = !this.props.noScroll && !this.props.noScrollX,
verticalScrollPossible = verticalScrollNotBlocked && this.content.scrollHeight > this.content.clientHeight,
horizontalScrollPossible = horizontalScrollNotBlocked && this.content.scrollWidth > this.content.clientWidth;

this.holder.classList.toggle("ScrollbarsCustom-RTL", this.isRtl);
let isRtl = this.props.rtl;

const verticalScrollPossible = this.content.scrollHeight > this.content.clientHeight && !this.props.noScroll && !this.props.noScrollY,
horizontalScrollPossible = this.content.scrollWidth > this.content.clientWidth && !this.props.noScroll && !this.props.noScrollX;
!isset(isRtl) && (isRtl = rtlAutodetect ? getComputedStyle(this.content).direction === "rtl" : this.isRtl || false);

if (verticalScrollPossible && ((this.previousScrollValues || true) || this.isRtl !== (this.previousScrollValues.rtl || false))) {
if (forced || this.isRtl !== isRtl) {
this.holder.classList.toggle("ScrollbarsCustom-RTL", isRtl);

this.isRtl = isRtl;
}

if (forced) {
const browserScrollbarWidth = getScrollbarWidth(),
fallbackScrollbarWidth = this.props.fallbackScrollbarWidth;

this.content.style.marginLeft = this.isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
this.content.style.paddingLeft = this.isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
this.content.style.marginRight = this.isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
this.content.style.paddingRight = this.isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
if (verticalScrollNotBlocked) {
this.content.style.marginLeft = isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
this.content.style.paddingLeft = isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
this.content.style.marginRight = isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
this.content.style.paddingRight = isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
}
else {
this.content.style.marginLeft =
this.content.style.paddingLeft =
this.content.style.marginRight =
this.content.style.paddingRight = null;
}
}

this.trackVertical.style.display = (verticalScrollPossible || this.props.permanentScrollbars || this.props.permanentScrollbarY) ? null : "none";
Expand Down Expand Up @@ -579,7 +596,6 @@ export default class Scrollbar extends React.Component
scrollWidth: this.content.scrollWidth,
clientHeight: this.content.clientHeight,
clientWidth: this.content.clientWidth,
rtl: this.props.rtl,
};

(this.previousScrollValues || false) && this.props.onScroll && this.props.onScroll(currentScrollValues, this);
Expand Down
14 changes: 14 additions & 0 deletions tests/Scrollbar/rendering.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,20 @@ export default function performTests() {
});

describe("when content does not overflow wrapper", () => {
it("native scrollbars should still be hidden", (done) => {
render(<Scrollbar style={ {width: 100, height: 100} }>
<div style={ {width: 50, height: 50} } />
</Scrollbar>,
node,
function () {
setTimeout(() => {
expect(this.content.style.marginRight).toBe(-getScrollbarWidth() + 'px');

done();
}, 100);
});
});

it("tracks should be hidden", (done) => {
render(<Scrollbar style={ {width: 100, height: 100} }>
<div style={ {width: 50, height: 50} } />
Expand Down

0 comments on commit 996d7c9

Please sign in to comment.