dumogu-scrollbar demo
滚动条默认挂载到body上(可自定义挂载位置),可为滚动条添加自定义样式,完全不影响滚动容器,不用在滚动容器中包装其他元素。
因为是挂载到body上,所以需要手动设置位置(demo中有例子),如果觉得麻烦请将滚动容器包装一层,挂载到父元素上(demo中有例子)。
注意,不要将自定义滚动条挂载到滚动元素中,因为绝对定位在滚动容器中是会随着滚动发生变化的,而且也会影响滚动容器,所以市面上的一些滚动库会将滚动容器包装一层或者很多层。
Github
自定义滚动条样式
始终显示滚动条,可以定义任意的css样式,完全不影响滚动容器,不会在滚动容器中添加任何多余的元素。
滚动容器
始终显示滚动条,可以定义任意的css样式,完全不影响滚动容器,不会在滚动容器中添加任何多余的元素。
始终显示滚动条,可以定义任意的css样式,完全不影响滚动容器,不会在滚动容器中添加任何多余的元素。
测试
测试
测试
始终显示滚动条,可以定义任意的css样式,完全不影响滚动容器,不会在滚动容器中添加任何多余的元素。
始终显示滚动条,可以定义任意的css样式,完全不影响滚动容器,不会在滚动容器中添加任何多余的元素。
测试
测试
测试
始终显示滚动条,可以定义任意的css样式,完全不影响滚动容器,不会在滚动容器中添加任何多余的元素。
始终显示滚动条,可以定义任意的css样式,完全不影响滚动容器,不会在滚动容器中添加任何多余的元素。
测试
测试
测试
你甚至可以只创建导轨,并将导轨放置到页面的任何位置
hover或者滚动容器hover的时候才显示
与原生并不冲突
滚动容器
滚动条有最小长度限制,与原生滚动条一致。
此元素高度100000px
测试
测试
测试
测试
测试
测试
测试
测试
测试
挂载到指定元素上
滚动容器,hover的时候显示滚动条
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试