时间戳

首页 > 解决方案 > 使用 HTML & JS 将垂直和水平滚动事件转换为水平滚动

javascript - 使用 HTML & JS 将垂直和水平滚动事件转换为水平滚动

问题描述

我正在使用 React.js 开发一个水平滚动的投资组合网站。本质上，它只是一个侧面的图片库，您可以使用触控板轻松滚动浏览。

目前，这一切都适合一个大容器，它使用：

  overflow-x: scroll;
  overflow-y: none;

  -ms-overflow-style: none;
  scrollbar-width: none;

最近我意识到这个网站对于使用鼠标和台式电脑的人来说是不可用的，因为据我所知鼠标不能横向滚动，除非有一个滚动条（出于审美原因我不想添加）或某种 y 到 x 滚动转换。

现在我正在尝试实现这种滚动转换，以防用户无法水平滚动。我找到了这个解决方案，但无法让它正常工作：

const scroller = document.getElementById('pageContainer');

window.addEventListener('wheel', e => {
   scroller.scrollLeft += e.deltaY;
});

上面的代码片段有效地打破了我的两种滚动方式。垂直滚动将我的页面容器非常轻微地向左滚动，大约是正常滚动速度的 1/12，如果不是更少的话。以前工作的水平滚动现在似乎与另一个滚动“战斗”，并将页面猛拉到正确的方向或结结巴巴。

我错过了什么？实现这一目标的最干净的方法是什么？

理想情况下，如果我以圆周运动“滚动”，我希望滚动以正弦运动的方式左右移动。

编辑：

我找到了一个可以实现所需行为并实现它的 codepen： https ://codepen.io/aaaaaaaz/pen/OJpXBXM

它仍然不起作用，但它给了我尝试scroll-behavior: smooth;在我的 css 中禁用的想法——我将它用于按钮，以编程方式更快地滚动到页面的其他部分。

现在的新问题是，有没有办法让这些东西协同工作？

标签： javascripthtmlcssreactjs

解决方案

请在您想要在投资组合网站上添加水平滚动的 div 样式中添加高度和宽度

#content {
  height: 100%;
  width: 9000px;
}

推荐阅读