扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇“react如何实现滚动条”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“react如何实现滚动条”文章吧。
成都创新互联公司网站建设公司，提供成都网站制作、做网站，网页设计，建网站，PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展；专业做搜索引擎喜爱的网站，是专业的做网站团队，希望更多企业前来合作!
react实现滚动条的方法：1、使用“render() {const translateDistancePercentage...}”方式设置滚动条滚动百分比；2、通过“.scrollBar {width: 362px;...}”设置滚动条宽度；3、设置样式为“left: -362px;top: 0px;position: absolute;”即可。
React-实现滚动条
一、实现效果
二、实现代码
jsx
render() {
const translateDistancePercentage = '33.33333333333333'; // 滚动条滚动百分比
console.log('滚动条滚动百分比' + translateDistancePercentage);
return (
// 滚动条
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;
}
}
}
下图圈出来了一些关键样式，颜色相同滴前后呼应喔~
以上就是关于“react如何实现滚动条”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网