New: Wider and taller scroll bar for the click to scrollers out there

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
pull/908/head
Qstick 5 years ago
parent dc6621ee06
commit 593259b1c0

@ -3,7 +3,7 @@
}
.thumb {
min-height: 50px;
min-height: 100px;
border: 1px solid transparent;
border-radius: 5px;
background-color: $scrollbarBackgroundColor;

@ -4,6 +4,8 @@ import { Scrollbars } from 'react-custom-scrollbars';
import { scrollDirections } from 'Helpers/Props';
import styles from './OverlayScroller.css';
const SCROLLBAR_SIZE = 10;
class OverlayScroller extends Component {
//
@ -21,7 +23,11 @@ class OverlayScroller extends Component {
scrollTop
} = this.props;
if (!this._isScrolling && scrollTop != null && scrollTop !== prevProps.scrollTop) {
if (
!this._isScrolling &&
scrollTop != null &&
scrollTop !== prevProps.scrollTop
) {
this._scroller.scrollTop(scrollTop);
}
}
@ -42,6 +48,42 @@ class OverlayScroller extends Component {
);
}
_renderTrackHorizontal = ({ style, props }) => {
const finalStyle = {
...style,
right: 2,
bottom: 2,
left: 2,
borderRadius: 3,
height: SCROLLBAR_SIZE
};
return (
<div
style={finalStyle}
{...props}
/>
);
}
_renderTrackVertical = ({ style, props }) => {
const finalStyle = {
...style,
right: 2,
bottom: 2,
top: 2,
borderRadius: 3,
width: SCROLLBAR_SIZE
};
return (
<div
style={finalStyle}
{...props}
/>
);
}
_renderView = (props) => {
return (
<div
@ -91,6 +133,8 @@ class OverlayScroller extends Component {
ref={this._setScrollRef}
autoHide={autoHide}
hideTracksWhenNotNeeded={autoScroll}
renderTrackHorizontal={this._renderTrackHorizontal}
renderTrackVertical={this._renderTrackVertical}
renderThumbHorizontal={this._renderThumb}
renderThumbVertical={this._renderThumb}
renderView={this._renderView}

@ -1,7 +1,7 @@
@define-mixin scrollbar {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
}
@ -13,7 +13,7 @@
@define-mixin scrollbarThumb {
&::-webkit-scrollbar-thumb {
min-height: 50px;
min-height: 100px;
border: 1px solid transparent;
border-radius: 5px;
background-color: $scrollbarBackgroundColor;

Loading…
Cancel
Save