css如何设置滚动条不占位置?

在网页中经常要使用滚动条,但是出现滚动条会导致内容偏移,想让滚动条不影响内容的排版可以通过设置滚动条不占宽度实现。下面我们来看一下css设置滚动条不占位置的方法。

css可以使用伪类::-webkit-scrollbar来设置滚动条的样式,在这个伪类选择器中将滚动条宽度设置为0即可使滚动条不占位置。

::-webkit-scrollbar介绍:

这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

  • ::-webkit-scrollbar — 整个滚动条.

  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.

  • ::-webkit-scrollbar-track — 滚动条轨道.

  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.

  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.

  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

语法:

::-webkit-scrollbar { styles here }

设置滚动条不占位置的css代码:

selector::-webkit-scrollbar{
width:0;
}

以上就是css如何设置滚动条不占位置?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏