Html CSS：直观地隐藏y轴滚动条而不影响x轴滚动条

要求

• 从

  div

  元素中目视移除y轴滚动条
• y轴必须仍然可以滚动，因此

  overflow-y:hidden

  将不起作用
• x轴滚动条必须保持完整，因此

  -webkit滚动条{display:none；}

  将无法工作，因为它也会删除x轴滚动条

解决方案约束

• 必须适用于最新版本的Chrome和Safari（不关心任何其他浏览器）

---

回答我自己的问题：

实际上，我能够通过使用CSS和Javascript的组合来实现这一点

我能够使用想要隐藏的y轴滚动条将

overflow-y:hidden

样式应用于div，并向该div添加自定义事件侦听器

免责声明：此解决方案不提供pageUp/pageDown或箭头键功能。您将需要其他事件侦听器来获取滚动以反映这些事件

---

回答我自己的问题：

实际上，我能够通过使用CSS和Javascript的组合来实现这一点

我能够使用想要隐藏的y轴滚动条将

overflow-y:hidden

样式应用于div，并向该div添加自定义事件侦听器

免责声明：此解决方案不提供pageUp/pageDown或箭头键功能。您将需要其他事件侦听器来获取滚动以反映这些事件

const div = document.getElementById('elementId');

div.addEventListener('mousewheel', ($event) => {
  // prevent the page from scrolling when you scroll on an 
  // element with a style of overflow-y: hidden
  $event.preventDefault();

  // Calculate and set the scroll position
  div.scrollTop = div.scrollTop - $event.wheelDelta;
});