这个网站的平滑滚动是怎么实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2261 天前的主题，其中的信息可能已经有所发展或是发生改变。

网址： https://ricotest.com/en/our-story/

鼠标滑动的时候明显能感觉到惯性，经测试只有在 Chrome 上才有这个效果，所以这是 Chrome 提供的 API ？

Chrome

API

滑动

平滑

5 条回复 • 2018-09-20 20:24:36 +08:00

molvqingtai

2018-09-20 19:18:46 +08:00

在网上找了一圈找到这个属性，但是也不能实现这样的效果
scroll-behavior: smooth;

noe132

2018-09-20 19:41:16 +08:00 via Android

可以自己接管鼠标事件来模拟平滑滚动。
可以根据需要模拟不同的滚动速度曲线。

luojianxhlxt

2018-09-20 19:43:22 +08:00

我的 cent 也是 chrome 内核啊
没感觉啥惯性。。。

p1llar

2018-09-20 20:04:40 +08:00

onwheel 事件了解一下，下面是从那个网站 copy 过来的

```
wheelEvent && isChrome && isSmoothScrollActive && (addEvent(wheelEvent, function(event) {
initDone || init();
var target = event.target
, overflowing = overflowingAncestor(target);
if (!overflowing || event.defaultPrevented || isNodeName(activeElement, "embed") || isNodeName(target, "embed") && /\.pdf/i.test(target.src))
return !0;
var deltaX = event.wheelDeltaX || 0
, deltaY = event.wheelDeltaY || 0;
if (deltaX || deltaY || (deltaY = event.wheelDelta || 0),
!options.touchpadSupport && isTouchpad(deltaY))
return !0;
Math.abs(deltaX) > 1.2 && (deltaX *= options.stepSize / 120),
Math.abs(deltaY) > 1.2 && (deltaY *= options.stepSize / 120),
scrollArray(overflowing, -deltaX, -deltaY),
event.preventDefault()
}),
```

molvqingtai

2018-09-20 20:24:36 +08:00

@p1llar 感谢！第一次知道这个事件，代码压缩查关键词找到的？