CSS 技术隐藏滚动条并禁用文本选择？

Question

我正在开发一个 Web 项目，我需要自定义容器元素的外观和行为。具体来说，我想从容器中删除滚动条并防止用户选择其中的文本。我尝试了各种 CSS 属性和技术，但还没有找到在不同浏览器上可靠工作的解决方案。

这是我到目前为止所做的尝试：

<div class="custom-container">
  <!-- Content goes here -->
</div>

CSS：

.custom-container {
  width: 300px;
  height: 200px;
  overflow: hidden; /* Hides scroll bars, but still allows scrolling */
  user-select: none; /* Prevents text selection, but doesn't work consistently */
}

虽然设置

overflow: hidden

成功隐藏了滚动条，但仍然允许用户使用鼠标或触摸手势滚动内容。此外，

user-select: none

属性会阻止文本选择，但并非所有浏览器都统一支持。

有人可以建议一个可靠的基于 CSS 的解决方案来实现隐藏滚动条和防止容器元素内的文本选择吗？任何见解或替代方法将不胜感激！

Answer 1

您可以结合使用 CSS 属性和一些附加技术。以下是修改 CSS 的方法：

.custom-container {
  width: 300px;
  height: 200px;
  overflow: hidden; /* Hides scroll bars */
}

.custom-container::-webkit-scrollbar {
  display: none; /* Hide scrollbars on WebKit browsers (Chrome, Safari, etc.) */
}

.custom-container {
  -ms-overflow-style: none; /* Hide scrollbars on Internet Explorer */
  scrollbar-width: none; /* Hide scrollbars on Firefox */
}

.custom-container {
  user-select: none; /* Prevent text selection */
  -moz-user-select: none; /* For Firefox */
  -webkit-user-select: none; /* For WebKit browsers */
  -ms-user-select: none; /* For Internet Explorer */
}

说明：

1. overflow: hidden;

   ：该属性隐藏滚动条，但仍然 允许用户使用鼠标或触摸手势滚动内容。

2. ::-webkit-scrollbar

   ：这个伪元素用于设置样式 WebKit 浏览器上的滚动条。设置

   display: none;

   隐藏 滚动条。

3. -ms-overflow-style: none;

   ：此属性特定于 Internet Explorer 和 Edge，它隐藏了滚动条。

4. scrollbar-width: none;

   ：此属性以及

   -moz-scrollbar

   选择器，隐藏 Firefox 上的滚动条。

5. user-select: none;

   ：此属性可防止在 容器。其他特定于供应商的前缀用于 跨浏览器兼容性。