CSS：以可视方式隐藏y轴滚动条，而不会影响x轴滚动条

问题描述

要求

• 从div元素中删除y轴滚动条
• y轴必须仍可滚动，因此overflow-y: hidden将不起作用
• x轴滚动条必须保持完整，因此-webkit-scrollbar { display: none; }不会起作用，因为它也会删除x轴滚动条。

解决方案约束

• 必须在最新版本的Chrome和Safari中运行（不关心任何其他浏览器）

解决方法

回答我自己的问题：

实际上，我能够通过结合使用CSS和Javascript来实现这一目标。

我能够通过要隐藏的y轴滚动条将div应用于overflow-y: hidden样式，并向该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;
});