Improve page scrollbar

New: Style scrollbar in Firefox
Fixed: Scrolling with click and drag

Closes #5189
This commit is contained in:
Mark McDowall 2022-11-13 18:04:20 -08:00
parent 1c6c9a7960
commit 9bd783d49c
2 changed files with 5 additions and 18 deletions

View File

@ -1,24 +1,12 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import OverlayScroller from 'Components/Scroller/OverlayScroller';
import Scroller from 'Components/Scroller/Scroller'; import Scroller from 'Components/Scroller/Scroller';
import { scrollDirections } from 'Helpers/Props'; import { scrollDirections } from 'Helpers/Props';
import { isFirefox, isMobile } from 'Utilities/browser';
import { isLocked } from 'Utilities/scrollLock'; import { isLocked } from 'Utilities/scrollLock';
import styles from './PageContentBody.css'; import styles from './PageContentBody.css';
class PageContentBody extends Component { class PageContentBody extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this._isMobile = isMobile();
this._isSmallScreenFirefox = isFirefox && window.innerWidth < 768;
}
// //
// Listeners // Listeners
@ -42,12 +30,8 @@ class PageContentBody extends Component {
...otherProps ...otherProps
} = this.props; } = this.props;
const ScrollerComponent = this._isMobile || this._isSmallScreenFirefox ?
Scroller :
OverlayScroller;
return ( return (
<ScrollerComponent <Scroller
className={className} className={className}
scrollDirection={scrollDirections.VERTICAL} scrollDirection={scrollDirections.VERTICAL}
{...otherProps} {...otherProps}
@ -56,7 +40,7 @@ class PageContentBody extends Component {
<div className={innerClassName}> <div className={innerClassName}>
{children} {children}
</div> </div>
</ScrollerComponent> </Scroller>
); );
} }
} }

View File

@ -1,4 +1,7 @@
@define-mixin scrollbar { @define-mixin scrollbar {
scrollbar-color: var(--scrollbarBackgroundColor) transparent;
scrollbar-width: thin;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;