CSS：可視地隱藏y軸滾動條而不影響x軸滾動條

Question

要求

• 以可視方式從div元素中移除 y 軸滾動條
• y 軸必須仍然是可滾動的，所以overflow-y: hidden將不起作用
• x 軸滾動條必須保持完整，所以-webkit-scrollbar { display: none; } -webkit-scrollbar { display: none; }將不起作用，因為它也刪除了 x 軸滾動條。

解決方案約束

• 必須在最新版本的 Chrome 和 Safari 中工作（不關心任何其他瀏覽器）

Answer 1

回答我自己的問題：

我實際上能夠通過使用 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;
});