[分享]css不显示滚动条但能滑动

CSS不显示滚动条但能滑动，是通过CSS的overflow属性来控制的。其中，overflow有四个取值：visible：默认值，内容不会被修剪，会呈现在元素框之外。 hidden：内容会被修剪并隐藏...

CSS不显示滚动条但能滑动，是通过CSS的overflow属性来控制的。其中，overflow有四个取值：

visible：默认值，内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪并隐藏，溢出的内容无法显示。
scroll：内容会被修剪，但是会显示滚动条，用户可以滚动查看溢出的内容。
auto：自动判断是否显示滚动条。

当我们希望内容滑动时，通常会将overflow设置为scroll或auto，这会在满足一定条件时自动显示滚动条。但是，在某些场景下，我们希望滑动时不显示滚动条，这时可以将overflow设置为hidden，并通过其他方式来实现滑动。

下面是一个示例，当鼠标悬浮在元素上时，元素的内容开始滑动，同时不显示滚动条：

 .box {
    width: 300px;
    height: 200px;
    overflow: hidden;
}
.box:hover {
    animation: slide 5s linear infinite;
}
@keyframes slide {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
} 

通过设置overflow:hidden，我们掩盖了内容的溢出部分，同时通过CSS动画来实现元素内容的滑动。当鼠标悬浮在元素上时，动画会开始，使得元素内容从上向下滑动，同时无需显示滚动条。