div实现可以滚动但不显示滚动条（纯CSS实现）
要实现一个可滚动但不显示滚动条的div，可以使用CSS的overflow属性来隐藏滚动条，同时通过其他方式保证内容的滚动功能。以下是一个实现的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无滚动条的可滚动div</title>
<style>
.scrollable {
width: 200px;
height: 100px;
overflow: auto; /* 开启滚动 */
scrollbar-width: none; /* 对于现代浏览器来说，隐藏滚动条 */
}
/* 针对IE和老版本浏览器的隐藏 */
.scrollable::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="scrollable">
这里是可滚动的内容。这里是可滚动的内容。这里是可滚动的内容。
这里是可滚动的内容。这里是可滚动的内容。这里是可滚动的内容。
这里是可滚动的内容。这里是可滚动的内容。这里是可滚动的内容。
这里是可滚动的内容。这里是可滚动的内容。这里是可滚动的内容。
</div>
</body>
</html>在这个例子中，.scrollable 类定义了一个宽度为200px、高度为100px的div，并通过overflow: auto;属性开启了滚动功能。同时，使用了scrollbar-width: none;属性来告诉浏览器默认不显示滚动条。最后，使用了::-webkit-scrollbar伪元素来针对使用Webkit内核的浏览器（如Chrome和Safari）隐藏滚动条。
评论已关闭