由轮事件引发时，具有平滑行为的 scrollIntoView 在 chrome 中不起作用

【问题标题】：scrollIntoView with smooth behavior not working in chrome when raised by wheel event由轮事件引发时，具有平滑行为的 scrollIntoView 在 chrome 中不起作用
【发布时间】：2018-05-08 04:48:43
【问题描述】：

解释起来有点棘手，因此了解问题的最简单方法可能是转到 the site web 并比较 Firefox（按预期正常工作）和 chrome（scrollIntoView 无法正常工作）之间的行为。

基本上，我有一个左栏菜单，但我不想放置一个位置：固定，所以它是一个带有浮动的相对菜单。所以主要内容的滚动是overflow-y on。

现在，我有一个“欢迎”图像，它占据了访问者的所有屏幕高度。我创建的行为是当访问者向下滚动时，它直接到图像的末尾。当访问者位于图像下方并向上滚动一点时，它会直接转到图像的顶部。除此之外，文本中的滚动效果很一般。

在 Firefox 上一切正常，但 Chrome 没有按预期滚动到视图中。在上面链接的网站中查看scroll.js文件，console.log显示chrome正在捕捉wheel事件并进入scrollIntoView但不滚动。

这是我应该报告的 chrome 中的错误吗？

谢谢

【问题讨论】：

标签： javascript google-chrome js-scrollintoview

【解决方案1】：

您必须查看WheelEvent.deltaMode 值才能了解浏览器如何报告车轮事件：

WheelEvent.deltaMode

只读

返回一个无符号长整数，表示增量值滚动量的单位。允许的值为：

Constant Value Description

DOM_DELTA_PIXEL 0x00 The delta values are specified in pixels.

DOM_DELTA_LINE 0x01 The delta values are specified in lines.

DOM_DELTA_PAGE 0x02 The delta values are specified in pages.

一个很好的跨浏览器标准化滚轮事件的库是https://github.com/basilfx/normalize-wheel

【讨论】：

谢谢，但我认为这不是问题所在。如果您检查 console.log，chrome 正在按预期输入函数。该错误在于调用 scrollIntoView 并将行为设置为平滑。