用css怎么设置div滚动条的样式,可改变大小的

html-css024

用css怎么设置div滚动条的样式,可改变大小的,第1张

在css设置可改变大小的div滚动条样式方法:

1.首先新建html文档,进入代码书写界面。

2.在</head>和<body>的里面写入代码,在<div>里面写入想要输入的内容</div>。

3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}

这里主要是设置外层轨道的形状和颜色。

4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}

这里主要是设置内层轨道的形状和颜色。

5.代码工作做完后,就可以查看效果,效果如下红框所示,滚动条设置完成。

CSS无法控制滚动条的样式。这里推荐几块滚动条美化的插件给你。

1. Windows:全屏窗口滚动插件

该插件可以很好地实现全屏滚动,每滚动一次即为一屏。比如,用户浏览下一屏幕内容时,只需手动滚动到某一位置,该插件会自动滚动显示下一屏全部内容。对于浏览类似于PPT的内容时比较实用。

2. Jquery Scroll Follow:滚动跟随插件

该插件可以使DOM对象随着页面的滚动而移动。你可以设置滚动的速度、偏移等参数。

3. 列表滚动插件

该插件可以为任意列表添加上滚动效果。你可以自定义列表的滚动方向和滚动速度。

4. Sly:灵活的基于ITEM的滚动插件

SLY提供了很多基于项目(如图像/内容画廊)的滚动选项,支持水平和垂直方向的无限滚动。

5. Coverscroll

仿苹果的CoverFlow设计,支持滚动条、鼠标滚轮和手势来滚动查看。

6. Sticky

 该插件可以让你的页面中的任何元素在滚动过程中始终可见

7. Tiny Scrollbar:一个轻量级的JQUERY插件

8. Sticky Float:另一个滚动跟随插件

9. Page Scroller:漂亮实用的滚动导航

10. Custom Srollbar:自定义内容滚动条插件

11. Scroll Up:一个轻量级的滚动到顶部插件

您好!很高兴为您答疑!

火狐不支持滚动条样式 如果非要样式效果,只能滚动效果用JS来做,使用图片代替按钮。

您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。