css overflow-x: scroll 不展示/隐藏滚动条

最新推荐文章于 2025-03-18 11:13:08 发布

翠花517

最新推荐文章于 2025-03-18 11:13:08 发布

阅读量6.3k

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/Dream_Fever/article/details/129855143

版权

文章介绍了如何使用CSS的Webkit伪类来定制滚动条的样式，包括隐藏滚动条、设置滚动条各部分的外观，以及对::-webkit-scrollbar系列伪类的详细解释。通过这些方法，开发者可以实现更美观和一致的滚动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view>
		<view class="overFlow">
			内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
		</view>
	</view>
</template>

<style lang="less">
	// 设置横向滚动滚动
	.overFlow {
		overflow-x: hidden;
		overflow-x: scroll;
	}
	// 隐藏滚动条
	.overFlow::-webkit-scrollbar {
		display: none
	}
</style>

除了可以设置隐藏滚动条，还有其他的伪类

    ::-webkit-scrollbar — 整个滚动条.
    ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
    ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
    ::-webkit-scrollbar-track — 滚动条轨道.
    ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
    ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
    ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).