V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
molvqingtai
V2EX  ›  前端开发

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

  •  
  •   molvqingtai ·
    molvqingtai · 2018-09-20 19:16:32 +08:00 · 3115 次点击
    这是一个创建于 2255 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    5 条回复    2018-09-20 20:24:36 +08:00
    molvqingtai
        1
    molvqingtai  
    OP
       2018-09-20 19:18:46 +08:00
    在网上找了一圈找到这个属性,但是也不能实现这样的效果
    scroll-behavior: smooth;
    noe132
        2
    noe132  
       2018-09-20 19:41:16 +08:00 via Android
    可以自己接管鼠标事件来模拟平滑滚动。
    可以根据需要模拟不同的滚动速度曲线。
    luojianxhlxt
        3
    luojianxhlxt  
       2018-09-20 19:43:22 +08:00
    我的 cent 也是 chrome 内核啊
    没感觉啥惯性。。。
    p1llar
        4
    p1llar  
       2018-09-20 20:04:40 +08:00   ❤️ 1
    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
        5
    molvqingtai  
    OP
       2018-09-20 20:24:36 +08:00
    @p1llar 感谢!第一次知道这个事件,代码压缩查关键词找到的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2784 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 13:48 · PVG 21:48 · LAX 05:48 · JFK 08:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.