admin 管理员组

文章数量: 1184232

Web端隐藏垂直滚动条且保留滚动效果

        在做项目时，发现UI们常常为了快速出图，在设计UI图时只设计一种正常情况下的布局，但是往往实际应用中，内容超出限定区域是很常见的现象，当内容超出时，如果css样式没有设置隐藏则会出现滚动条，而滚动条的出现会使原本的内容区域减少，因此需要隐藏Y轴滚动条的样式并且保留滚动效果，这样才能保证在内容超出限定区域时不影响页面布局。

::-webkit-scrollbar 这一属性就是css里对滚动条的设置

仅垂直滚动条隐藏样式

::-webkit-scrollbar{width: 0 !important;
}

水平滚动条的隐藏则是 height:0 不推荐，因为web端如果隐藏水平滚动条，那么用户只能通过方向键←→进行左右移动，操作并不友好。

如果overflow-x：hidden的情况下，也可以使用此样式进行滚动条隐藏

::-webkit-scrollbar{display: none;
}

使用案例：

<div class="scroll-div">内容一堆内容一堆内容一堆内容一堆内容一堆内容一堆内容一堆内容一堆内容一堆内容一堆内容一堆内容一堆
</div>.scroll-div{width: 50px;height: 50px;overflow: auto;
}
.scroll-div::-webkit-scrollbar{width: 0 !important;
}

滚动条相关样式说明：

::-webkit-scrollbar

滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等

::-webkit-scrollbar-button

滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果.

::-webkit-scrollbar-track

外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track-piece

内层轨道，滚动条中间部分。
滚动条没有滑块的轨道部分.

::-webkit-scrollbar-thumb

滚动条上的滚动滑块.
滚动条里面可以拖动的那部分,即滚动条。

::-webkit-scrollbar-corner

边角.
当同时有垂直滚动条和水平滚动条时交汇的部分.

::-webkit-resizer

定义右下角拖动块的样式.
某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

本文标签： Web端隐藏垂直滚动条且保留滚动效果

版权声明：本文标题：Web端隐藏垂直滚动条且保留滚动效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/p/1698028892a283478.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。