Skip to content

Commit 996d7c9

Browse files
xobotyixobotyi
committed
Improved performance;
Fixed bug with native scrollbars displayed when scrolling not needed;
1 parent dd5a1fb commit 996d7c9

File tree

4 files changed

+72
-21
lines changed

4 files changed

+72
-21
lines changed

‎dist/index.js‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -337,20 +337,31 @@ function (_React$Component) {
337337
}
338338
}
339339

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

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

344-
var verticalScrollPossible = _this.content.scrollHeight > _this.content.clientHeight && !_this.props.noScroll && !_this.props.noScrollY,
345-
horizontalScrollPossible = _this.content.scrollWidth > _this.content.clientWidth && !_this.props.noScroll && !_this.props.noScrollX;
350+
_this.isRtl = isRtl;
351+
}
346352

347-
if (verticalScrollPossible && (_this.previousScrollValues || true || _this.isRtl !== (_this.previousScrollValues.rtl || false))) {
353+
if (forced) {
348354
var browserScrollbarWidth = (0, _utilities.getScrollbarWidth)(),
349355
fallbackScrollbarWidth = _this.props.fallbackScrollbarWidth;
350-
_this.content.style.marginLeft = _this.isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
351-
_this.content.style.paddingLeft = _this.isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
352-
_this.content.style.marginRight = _this.isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
353-
_this.content.style.paddingRight = _this.isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
356+
357+
if (verticalScrollNotBlocked) {
358+
_this.content.style.marginLeft = isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
359+
_this.content.style.paddingLeft = isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
360+
_this.content.style.marginRight = isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
361+
_this.content.style.paddingRight = isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
362+
} else {
363+
_this.content.style.marginLeft = _this.content.style.paddingLeft = _this.content.style.marginRight = _this.content.style.paddingRight = null;
364+
}
354365
}
355366

356367
_this.trackVertical.style.display = verticalScrollPossible || _this.props.permanentScrollbars || _this.props.permanentScrollbarY ? null : "none";
@@ -395,8 +406,7 @@ function (_React$Component) {
395406
scrollHeight: _this.content.scrollHeight,
396407
scrollWidth: _this.content.scrollWidth,
397408
clientHeight: _this.content.clientHeight,
398-
clientWidth: _this.content.clientWidth,
399-
rtl: _this.props.rtl
409+
clientWidth: _this.content.clientWidth
400410
};
401411
(_this.previousScrollValues || false) && _this.props.onScroll && _this.props.onScroll(currentScrollValues, _assertThisInitialized(_assertThisInitialized(_this)));
402412
_this.previousScrollValues = currentScrollValues;
@@ -409,6 +419,8 @@ function (_React$Component) {
409419
_createClass(Scrollbar, [{
410420
key: "componentDidMount",
411421
value: function componentDidMount() {
422+
this.isRtl = null;
423+
412424
_LoopController.default.registerScrollbar(this);
413425

414426
this.addListeners();

‎examples/app/components/blocks/SandboxBlock.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default class SandboxBlock extends React.Component
1515
this.togglePermanentTrackY = this.togglePermanentTrackY.bind(this);
1616
this.togglePermanentTrackX = this.togglePermanentTrackX.bind(this);
1717
this.handleAddParagraphClick = this.handleAddParagraphClick.bind(this);
18+
this.handleRemoveParagraphClick = this.handleRemoveParagraphClick.bind(this);
1819
this.handleRandomPositionClick = this.handleRandomPositionClick.bind(this);
1920
this.handleScrollTopClick = this.handleScrollTopClick.bind(this);
2021
this.handleScrollBottomClick = this.handleScrollBottomClick.bind(this);
@@ -108,6 +109,13 @@ export default class SandboxBlock extends React.Component
108109
});
109110
}
110111

112+
handleRemoveParagraphClick() {
113+
this.setState({
114+
...this.state,
115+
paragraphsCount: Math.max(0, this.state.paragraphsCount - 1),
116+
});
117+
}
118+
111119
handleRandomPositionClick() {
112120
this.scrollbar.scrollTop = Math.floor(Math.random() * (this.scrollbar.scrollHeight + 1));
113121
this.scrollbar.scrollLeft = Math.floor(Math.random() * (this.scrollbar.scrollWidth + 1));
@@ -152,6 +160,7 @@ export default class SandboxBlock extends React.Component
152160
<div className="button" key="scrollRight" onClick={ this.handleScrollRightClick }>Scroll right</div>
153161
<br />
154162
<div className="button" key="addParagraph" onClick={ this.handleAddParagraphClick }>Add paragraph</div>
163+
{ !!this.state.paragraphsCount && <div className="button" key="removeParagraph" onClick={ this.handleRemoveParagraphClick }>Remove paragraph</div> }
155164
</div>
156165
<div className="content" style={ {height: 280} }>
157166
<Scrollbar

‎src/index.js‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export default class Scrollbar extends React.Component
126126
};
127127

128128
componentDidMount() {
129+
this.isRtl = null;
129130
LoopController.registerScrollbar(this);
130131

131132
this.addListeners();
@@ -515,21 +516,37 @@ export default class Scrollbar extends React.Component
515516
}
516517
}
517518

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

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

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

525-
if (verticalScrollPossible && ((this.previousScrollValues || true) || this.isRtl !== (this.previousScrollValues.rtl || false))) {
528+
if (forced || this.isRtl !== isRtl) {
529+
this.holder.classList.toggle("ScrollbarsCustom-RTL", isRtl);
530+
531+
this.isRtl = isRtl;
532+
}
533+
534+
if (forced) {
526535
const browserScrollbarWidth = getScrollbarWidth(),
527536
fallbackScrollbarWidth = this.props.fallbackScrollbarWidth;
528537

529-
this.content.style.marginLeft = this.isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
530-
this.content.style.paddingLeft = this.isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
531-
this.content.style.marginRight = this.isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
532-
this.content.style.paddingRight = this.isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
538+
if (verticalScrollNotBlocked) {
539+
this.content.style.marginLeft = isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
540+
this.content.style.paddingLeft = isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
541+
this.content.style.marginRight = isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
542+
this.content.style.paddingRight = isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
543+
}
544+
else {
545+
this.content.style.marginLeft =
546+
this.content.style.paddingLeft =
547+
this.content.style.marginRight =
548+
this.content.style.paddingRight = null;
549+
}
533550
}
534551

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

585601
(this.previousScrollValues || false) && this.props.onScroll && this.props.onScroll(currentScrollValues, this);

‎tests/Scrollbar/rendering.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,20 @@ export default function performTests() {
226226
});
227227

228228
describe("when content does not overflow wrapper", () => {
229+
it("native scrollbars should still be hidden", (done) => {
230+
render(<Scrollbar style={ {width: 100, height: 100} }>
231+
<div style={ {width: 50, height: 50} } />
232+
</Scrollbar>,
233+
node,
234+
function () {
235+
setTimeout(() => {
236+
expect(this.content.style.marginRight).toBe(-getScrollbarWidth() + 'px');
237+
238+
done();
239+
}, 100);
240+
});
241+
});
242+
229243
it("tracks should be hidden", (done) => {
230244
render(<Scrollbar style={ {width: 100, height: 100} }>
231245
<div style={ {width: 50, height: 50} } />

0 commit comments

Comments
 (0)