html怎么让滚动条不占位置,css怎么设置滚动条不占宽度？

div定义的宽度 = 内容宽度+滚动条宽度。出现滚动条会导致内容偏移，想让滚动条不占宽度该如何设置，下面我们来看一下css设置滚动条不占宽度的方法。

定义一个标签，标签的宽度为内容宽度加上滚动条宽度，可以设置滚动条的宽度为0，这样滚动条就可以不出现。.mask::-webkit-scrollbar{

width:0;

}

你可以使用以下伪元素选择器去修改各式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 }

示例：.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {

display: block;

width: 10em;

overflow: auto;

height: 2em;

}

.invisible-scrollbar::-webkit-scrollbar {

display: none;

}

/* Demonstrate a "mostly customized" scrollbar

* (won't be visible otherwise if width/height is specified) */

.mostly-customized-scrollbar::-webkit-scrollbar {

width: 5px;

height: 8px;

background-color: #aaa; /* or add it to the track */

}

/* Add a thumb */

.mostly-customized-scrollbar::-webkit-scrollbar-thumb {

background: #000;

}

html怎么让滚动条不占位置,css怎么设置滚动条不占宽度？相关推荐

html设置最小宽度滚动条,如何在CSS中设置滚动条的宽度？
现在许多项目中使用滚动条,在某些情况下,使用模拟滚动条. 许多大型邮箱都是使用CSS样式设置的div滚动条宽度,那么CSS如何设置滚动条的宽度? 您可以在CSS中使用::-webkit-scrollb ...
html滚动字幕怎么设置大小,css怎么设置滚动条宽度？
现在很多项目中都用到了滚动条,而且在有的时候,用到的是模拟滚动条,很多大型邮箱都是利用css样式来设置的,那么CSS如何设置滚动条宽度呢? css中可以使用::-webkit-scrollbar伪类选 ...
html隐藏后还占位置,css隐藏不占位置的方法是什么？
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...
html相对定位不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative 默认值:stat ...
在html中字怎么修改位置,css怎么设置字体位置？
css怎么设置字体位置?下面本篇文章给大家介绍一下使用CSS设置字体位置的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:使用text-align属性设置字体的位置 t ...
css如何设置滚动条，设置滚动条需要用到的参数
首先我们来看一下css设置滚动条可能需要的属性. overflow-y:设置当对象的内容超过其指定高度时如何管理内容: overflow-x:设置当对象的内容超过其指定宽度时如何管理内容: 参数: v ...
html网页设计滚动条怎么设置,css怎么设置滚动条？
在我们HTML页面中经常会用到滚动条来优化我们的HTML页面,那么我们该如何设置滚动条呢?下面我们来看一下使用css设置滚动条的方法. 一.我们可以使用overflow属性设置是否出现滚动条overf ...
html怎么修改字体位置,css怎么设置字体位置？
css怎么设置字体位置?下面本篇文章给大家介绍一下使用CSS设置字体位置的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:使用text-align属性设置字体的位置 t ...
css改火狐滚动条样式_CSS在火狐中设置滚动条颜色
如果你在IE浏览器下设置滚动条颜色: body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-sh ...
html不现实但占位置,css怎么占位但不显示？
css可以使用visibility:hidden样式设置元素占位但不显示.visibility属性规定元素是否可见,即使不可见的元素也会占据页面上的空间. CSS的visibility属性使元素占位, ...

html怎么让滚动条不占位置,css怎么设置滚动条不占宽度？

html怎么让滚动条不占位置,css怎么设置滚动条不占宽度？相关推荐

最新文章

热门文章