隐藏滚动条但是依然可以滚动实现方式

方法一： iscroll插件

方法二：
通过固定宽度样式将滚动条给隐藏起来。chrom 和ie 正常使用。

......

// css
.outer-container{width: 360px;height: 200px;position: relative;overflow: hidden;
}
.inner-container{position: absolute;left: 0;top: 0;right: -17px;bottom: 0;overflow-x: hidden;overflow-y: scroll;
}

方法三：使用三个容器包裹，不需要写死滚动条宽度

......
.element, .outer-container {width: 200px;height: 200px;
}.outer-container {border: 5px solid purple;position: relative;overflow: hidden;
}.inner-container {position: absolute;left: 0;overflow-x: hidden;overflow-y: scroll;
}.inner-container::-webkit-scrollbar {display: none;
}

设置常规的滚动条：使用 overflow:auto。父元素需要设置一个高度，设置相对定位，这样子元素的高度大于父元素高度才能显示滚动条。如果父元素的高度完全由子元素撑开，界面上不会出现滚动条。设置overflow：auto 失效的主要问题：可能是这个div没有设置 100% 然后父元素清除浮动 (float：none; position: relative;)
 

.father {position: relative;height: 100px;border: 1px splid red;
}
.son {overflow: auto;height: 1000px;
}

设置鼠标经过显示的滚动条：预设值盒子是 hidden。当鼠标经过这样盒子时，设置盒子的overflow 变成 auto。这样鼠标不经过时不会显示滚动条。缺点：如果盒子内部有文字，盒子的宽度变化可能造成文字的重新排版，视觉上有点不好看。如果内容宽度是百分比或者flex布局，鼠标移动会造成宽度变化，所以可以使用下面的改进版，不同情况父元素设置不同的宽度

div {overflow: hidden;width: calc(100% - 8px);8px 是滚动条的宽度（在谷歌上显示良好）
}
div:hover {overflow: auto;width: 100%;
}

设置界面可以滚动但是不显示滚动条：

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

::-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的可拖动按钮).

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！