How to implement scroll bar in react-JS Tutorial-php.cn

How to implement scroll bars in react: 1. Use "render() {const translateDistancePercentage...}" to set the scroll bar scrolling percentage; 2. Use ".scrollBar {width: 362px;...} "Set the width of the scroll bar; 3. Set the style to "left: -362px; top: 0px; position: absolute;".

How to implement scroll bar in react

#The operating environment of this tutorial: Windows 10 system, react18 version, Dell G3 computer.

How to implement scroll bars in react?

React-implement scroll bar

1. Implementation effect

How to implement scroll bar in react

##2. Implementation code

jsx

render() { const translateDistancePercentage = '33.33333333333333'; // 滚动条滚动百分比 console.log('滚动条滚动百分比' + translateDistancePercentage); return ( // 滚动条    
 
 ) }

Copy after login

less

.scrollBar { /** 滚动条宽度 */ width: 362px; height: 12px; left: 0px; top: 36px; position: absolute; opacity: 0.7; background-position: center; background-repeat: no-repeat; background-size: cover; .scrollBarHousing { width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; border-radius: 60px; /** 下面这个很关键喔 */ overflow: hidden; .insideScrollBar { width: 100%; height: 100%; /** 让滚动条内里一来就先位于滚动条外最左侧 */ left: -362px; top: 0px; position: absolute; border-radius: 60px; background-position: center; background-repeat: no-repeat; background-size: cover; } } }

Copy after login

The picture below circles some key styles. The colors are the same and echo before and after~

How to implement scroll bar in react

Recommended study: "

react video tutorial》

The above is the detailed content of How to implement scroll bar in react. For more information, please follow other related articles on the PHP Chinese website!