Question

我正在处理一个具有滚动显示动画和页面更改（特别是滚动方向）的Web项目，并且我一直在寻找多个可能的好和可靠的解决方案。

我一直在通过检测窗口的scrollY与用户先前保存的scrollY来检测滚动方向，该用户之前已保存在变量中。唯一的问题是scroll事件在页面顶部或底部时不会触发，即使内容全部是绝对/固定位置。

由于事件中的wheel值，我想转到deltaY事件，当它位于页面底部的顶部时仍会触发，因此我可以删除滚动条并保持页面100vh的正文。

Mozilla 开发人员文档说：

不要将wheel事件与scroll事件混淆。默认值车轮事件的操作是特定于实现的，并非必须调度滚动事件。即使这样做，delta* wheel事件中的值不一定反映内容的滚动方向。因此，不要依赖转轮事件的 delta*个属性以获取滚动方向。相反，检测 scrollLeft中目标的scrollTop和scroll的值变化事件。（https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event）

我也很好奇wheel事件是否可以通过 touch 在手机上正常运行？

以下是我要复制的内容的一个很好的例子：https://reed.be 没有滚动条，但是根据您的滚动情况仍然会发生。

CanIuse 显示wheel事件与现代浏览器以及某些旧版本的完全兼容性。

参见此处-> https://caniuse.com/#feat=mdn-api_wheelevent

我找到了引用wheel事件（How to determine scroll direction without actually scrolling）的解决方案，尽管我的问题仍然适用-

wheel事件在各种设备和浏览器（包括移动设备）上的可靠性如何？

我只能使用自己当前版本的浏览器和android设备进行测试。

Answer 1

您可以通过设置正文上的附加高度以匹配内容宽度并将溢出设置为滚动来欺骗浏览器。然后使用一些基本脚本，将容器的scrollLeft属性设置为等于窗口scrollY。

您需要将主体的高度设置为等于面板总宽度。

body {
   height: 400vh; // 4 panels of 100vw each
   ...
}

.panel {
   width: 100vw;
   ...
}

JS

const viewPort = document.querySelector('#viewport');

let lastScroll = 0;
window.addEventListener('scroll', (e) => {
  let scrollY = window.scrollY;

  // scroll the container by and equal amount of your window scroll
  viewPort.scrollLeft = scrollY;

  lastScroll = scrollY;
});

Rough JSFiddle Demo

车轮事件可靠性

1 个答案: