Skip to content

Commit e24fcf4

Browse files
xobotyixobotyi
committed
noScroll, scrollY and scrollX properties;
1 parent 522c61e commit e24fcf4

File tree

5 files changed

+88
-32
lines changed

5 files changed

+88
-32
lines changed

‎examples/components/SandboxScrollbars/App.js‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,15 @@ export default class App extends React.Component
99
this.handleTracksClick = this.handleTracksClick.bind(this);
1010
this.handleRandomScrollPositionClick = this.handleRandomScrollPositionClick.bind(this);
1111
this.handleAddParagraphClick = this.handleAddParagraphClick.bind(this);
12+
this.handleNoScrollClick = this.handleNoScrollClick.bind(this);
13+
this.handleNoScrollXClick = this.handleNoScrollXClick.bind(this);
14+
this.handleNoScrollYClick = this.handleNoScrollYClick.bind(this);
1215

1316
this.state = {
14-
permanentTracks: true,
17+
permanentTracks: false,
18+
noScroll: false,
19+
noScrollX: false,
20+
noScrollY: false,
1521
paragraphs: 3,
1622
};
1723
}
@@ -23,6 +29,27 @@ export default class App extends React.Component
2329
});
2430
}
2531

32+
handleNoScrollClick() {
33+
this.setState({
34+
...this.state,
35+
noScroll: !this.state.noScroll,
36+
});
37+
}
38+
39+
handleNoScrollXClick() {
40+
this.setState({
41+
...this.state,
42+
noScrollX: !this.state.noScrollX,
43+
});
44+
}
45+
46+
handleNoScrollYClick() {
47+
this.setState({
48+
...this.state,
49+
noScrollY: !this.state.noScrollY,
50+
});
51+
}
52+
2653
handleAddParagraphClick() {
2754
this.setState({
2855
...this.state,
@@ -35,7 +62,7 @@ export default class App extends React.Component
3562
}
3663

3764
render() {
38-
const {permanentTracks, paragraphs} = this.state;
65+
const {permanentTracks, paragraphs, noScroll, noScrollX, noScrollY} = this.state;
3966
const elements = [...Array(paragraphs)].map((v, i) =>
4067
<p key={ i }>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>);
4168

@@ -44,16 +71,22 @@ export default class App extends React.Component
4471
<div className="title">Sandbox</div>
4572
<div className="description">
4673
<div className="button" onClick={ this.handleTracksClick }>{ permanentTracks ? "Dont show" : "Show" } tracks permanently</div>
74+
<div className="button" onClick={ this.handleNoScrollClick }>{ noScroll ? "Scroll" : "No scroll" }</div>
75+
<div className="button" onClick={ this.handleNoScrollXClick }>{ noScrollX ? "Scroll X" : "No scroll X" }</div>
76+
<div className="button" onClick={ this.handleNoScrollYClick }>{ noScrollY ? "Scroll Y" : "No scroll Y" }</div>
4777
<div className="button" onClick={ this.handleRandomScrollPositionClick }>Random position</div>
4878
<div className="button" onClick={ this.handleAddParagraphClick }>Add paragraph</div>
4979
</div>
5080
<Scrollbar
5181
ref={ (ref) => {this.scrollbar = ref;} }
5282
defaultStyles={ false }
83+
noScroll={ noScroll }
84+
scrollX={ !noScrollX }
85+
scrollY={ !noScrollY }
5386
permanentScrollbars={ permanentTracks }>
5487
{ elements }
5588
</Scrollbar>
5689
</div>
5790
);
5891
}
59-
}
92+
}

‎examples/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ render(
1414
<SandboxScrollbarsApp key="sandbox" />,
1515
],
1616
document.getElementById('appRoot'),
17-
);
17+
);

‎src/Scrollbar/defaultElementRender.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export function wrapper(props) {
55
}
66

77
export function content(props) {
8+
console.log(props.style.overflow);
89
return <div className="CustomScrollbar-content" { ...props } />;
910
}
1011

‎src/Scrollbar/defaultElementStyle.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,31 @@ export const wrapper = {
99
gridRow: 1,
1010
};
1111
export const trackVertical = {
12+
display: 'block',
1213
position: 'relative',
1314
width: 8,
1415
background: 'rgba(0,0,0,.1)',
1516
gridColumn: 2,
1617
gridRow: 1,
1718
};
1819
export const trackHorizontal = {
20+
display: 'block',
1921
position: 'relative',
2022
height: 8,
2123
background: 'rgba(0,0,0,.1)',
2224
gridColumn: 1,
2325
gridRow: 2,
2426
};
2527
export const thumbVertical = {
28+
display: 'block',
2629
position: 'relative',
2730
width: '100%',
2831
height: 0,
2932
cursor: 'pointer',
3033
background: 'rgba(0,0,0,.35)',
3134
};
3235
export const thumbHorizontal = {
36+
display: 'block',
3337
position: 'relative',
3438
height: '100%',
3539
width: 0,

‎src/Scrollbar/index.js‎

Lines changed: 46 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -635,40 +635,58 @@ export default class Scrollbar extends Component
635635

636636
const browserScrollbarWidth = getScrollbarWidth();
637637

638-
let holderStyle = {...style, ...(defaultStyles && (gridless ? defaultElementStyles.holderGridless : defaultElementStyles.holder))},
639-
wrapperStyle = {...(defaultStyles && (gridless ? defaultElementStyles.wrapperGridless : defaultElementStyles.wrapper)), position: 'relative', overflow: 'hidden'},
640-
contentStyle = {...defaultElementStyles.content, marginRight: -browserScrollbarWidth, marginBottom: -browserScrollbarWidth},
641-
trackVerticalStyle = {...(defaultStyles && (gridless ? defaultElementStyles.trackVerticalGridless : defaultElementStyles.trackVertical))},
642-
thumbVerticalStyle = {...(defaultStyles && defaultElementStyles.thumbVertical)},
643-
trackHorizontalStyle = {...(defaultStyles && (gridless ? defaultElementStyles.trackHorizontalGridless : defaultElementStyles.trackHorizontal))},
644-
thumbHorizontalStyle = {...(defaultStyles && defaultElementStyles.thumbHorizontal)};
638+
const holderStyle = {...style, ...(defaultStyles && (gridless ? defaultElementStyles.holderGridless : defaultElementStyles.holder))},
639+
wrapperStyle = {...(defaultStyles && (gridless ? defaultElementStyles.wrapperGridless : defaultElementStyles.wrapper)), position: 'relative', overflow: 'hidden'},
640+
contentStyle = {...defaultElementStyles.content, overflowX: 'scroll', overflowY: 'scroll', marginRight: -browserScrollbarWidth, marginBottom: -browserScrollbarWidth},
641+
trackVerticalStyle = {...(defaultStyles && (gridless ? defaultElementStyles.trackVerticalGridless : defaultElementStyles.trackVertical))},
642+
thumbVerticalStyle = {...(defaultStyles && defaultElementStyles.thumbVertical)},
643+
trackHorizontalStyle = {...(defaultStyles && (gridless ? defaultElementStyles.trackHorizontalGridless : defaultElementStyles.trackHorizontal))},
644+
thumbHorizontalStyle = {...(defaultStyles && defaultElementStyles.thumbHorizontal)};
645645

646646
if (noScroll || (!scrollY && !scrollX)) {
647-
contentStyle = {...defaultElementStyles.content, overflow: 'hidden', marginRight: null, marginBottom: null};
648-
trackVerticalStyle = {display: 'none'};
649-
trackHorizontalStyle = {display: 'none'};
647+
contentStyle.marginRight = contentStyle.marginBottom = null;
648+
contentStyle.overflowX = contentStyle.overflowY = 'hidden';
649+
650+
trackVerticalStyle.display = trackHorizontalStyle.display = 'none';
650651
}
651-
else {
652-
if (!scrollY) {
653-
contentStyle = {...contentStyle, overflowY: 'hidden', marginRight: null};
654-
trackVerticalStyle = {display: 'none'};
655-
}
656-
if (!scrollX) {
657-
contentStyle = {...contentStyle, overflowX: 'hidden', marginBottom: null};
658-
trackHorizontalStyle = {display: 'none'};
652+
else if (!scrollY) {
653+
contentStyle.marginRight = null;
654+
contentStyle.overflowX = 'scroll';
655+
contentStyle.overflowY = 'hidden';
656+
657+
trackVerticalStyle.display = 'none';
658+
}
659+
else if (!scrollX) {
660+
contentStyle.marginBottom = null;
661+
contentStyle.overflowY = 'scroll';
662+
contentStyle.overflowX = 'hidden';
663+
664+
trackHorizontalStyle.display = 'none';
665+
}
666+
667+
console.log(contentStyle);
668+
669+
if ((permanentScrollbars || permanentScrollbarVertical)) {
670+
trackVerticalStyle.display = null;
671+
672+
if (noScroll || !scrollY) {
673+
thumbVerticalStyle.display = 'none';
659674
}
660675
}
676+
else if (!browserScrollbarWidth) {
677+
trackVerticalStyle.display = 'none';
678+
}
679+
680+
if ((permanentScrollbars || permanentScrollbarHorizontal)) {
681+
trackHorizontalStyle.display = null;
661682

662-
//const trackVerticalStyle = {
663-
// ...(defaultStyles && defaultElementStyles.trackVertical),
664-
// ...(!permanentScrollbars && !permanentScrollbarVertical && !browserScrollbarWidth && {display: 'none'}),
665-
// },
666-
// thumbVerticalStyle = {...(defaultStyles && defaultElementStyles.thumbVertical)},
667-
// trackHorizontalStyle = {
668-
// ...(defaultStyles && defaultElementStyles.trackHorizontal),
669-
// ...(!permanentScrollbars && !permanentScrollbarHorizontal && !browserScrollbarWidth && {display: 'none'}),
670-
// },
671-
// thumbHorizontalStyle = {...(defaultStyles && defaultElementStyles.thumbHorizontal)};
683+
if (noScroll || !scrollX) {
684+
thumbHorizontalStyle.display = 'none';
685+
}
686+
}
687+
else if (!browserScrollbarWidth) {
688+
trackHorizontalStyle.display = 'none';
689+
}
672690

673691
return createElement(
674692
tagName,

0 commit comments

Comments
 (0)