div滚动条样式怎么设置
很多朋友可能还不知道，用CSS3其实可以很简单地给滚动条加点“花样”！先给元素设置overflow: scroll，这样滚动条就出来了。然后，用::-webkit-scrollbar这类伪元素去定制滚动条样式——不过注意哦，这主要是WebKit内核浏览器支持，比如Chrome和Safari，其他浏览器可能不支持哦。你可以分别定制滚动条的轨道、滑块、按钮啥的，想怎么搞就怎么搞，超级灵活！
css滚动条颜色样式和位置固定怎么做
-
想让滚动条颜色和宽度更好看？你可以用这些伪元素：
-::-webkit-scrollbar：控制滚动条的宽度和高度，比如width: 9px;
-::-webkit-scrollbar-track-piece：滑道的颜色，比如background-color:#f8f8f8;
-::-webkit-scrollbar-thumb：滑块的颜色和样式，比如background-color:#dddddd;还能加点边框啥的，很酷炫！ -
有时候你发现写了代码，滚动条样式好像不生效，是不是郁闷？别急，这儿给你几个小tips：
- 先用前端开发工具（F12）新建个简单页，给一个容器div加class="scroll-box"，再给它里面子div加class="scroll"，别忘了内容要多一些，这样滚动条才出现哦。
- 给父容器设个固定高度，还要设置overflow: auto或者scroll，这样才能看到滚动条，样式才会生效。
- 记住，部分浏览器不支持自定义滚动条，测试的时候请用Chrome或Safari。 -
你还想让导航栏或者某个div的滚动条“固定在顶部”，那也超简单：
- 直接给导航容器加position: fixed; top: 0;，无论页面怎么滚动，它都死活贴着顶部。
- 但别忘了给内容加个padding-top，避免导航盖住下面内容，体验好极了！
- 这样一来，滚动条和导航就像闹着玩似的，永远在线！
整合下来，这几个小技巧，保证让你的网站滚动条不再土气，立刻变得高大上，用户体验蹭蹭上涨，真是棒棒哒！
相关问题解答
-
自定义滚动条样式是不是所有浏览器都支持啊?
真心跟你说，不是所有浏览器都支持啦。像Chrome和Safari这类WebKit内核的浏览器，那是支持得妥妥的；但是像Firefox、IE、Edge这些，支持就差强人意或者根本不支持，用::-webkit-scrollbar就白写了。所以用的时候，建议先确定你的目标用户主要用哪个浏览器，嘿嘿。 -
为什么我写了滚动条样式却一点不见效呢?
哎呀，这种情况太常见了！你要检查几点：第一内容要多，滚动条才能出现；第二别忘了给元素设置固定高度和overflow: auto或者scroll；还有就是，浏览器支持不支持也影响效果。碰到这情况，使用Chrome的开发者工具看下是不是样式被覆盖或者没应用，对症下药就好了，超级easy！ -
怎么让滚动条固定位置，比如导航栏滚动不动?
超简单！给导航栏的样式加上position: fixed; top: 0; width: 100%; z-index: 9999;，让它固定在页面顶部。然后为了避免挡住内容，别忘了给下边的主要内容加个padding-top调整下距离。这样滚动的时候，导航稳稳地在上面，不会跑掉，用户体验感瞬间提升。 -
改变滚动条颜色会不会影响网站性能呀?
别担心啦，改个滚动条颜色一点也不会拖慢页面，真的是小菜一碟。除非你写的CSS啥地方写得乱七八糟或者配合好多复杂动画，那才会稍微影响性能。纯粹改滚动条颜色，这事儿真不算啥，你全力搞就对了，让滚动条好看最重要啦！
发表评论