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

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

  •  
  •   molvqingtai · 153 天前 · 948 次点击
    这是一个创建于 153 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    5 回复  |  直到 2018-09-20 20:24:36 +08:00
        1
    molvqingtai   153 天前
    在网上找了一圈找到这个属性,但是也不能实现这样的效果
    scroll-behavior: smooth;
        2
    noe132   153 天前 via Android
    可以自己接管鼠标事件来模拟平滑滚动。
    可以根据需要模拟不同的滚动速度曲线。
        3
    luojianxhlxt   153 天前
    我的 cent 也是 chrome 内核啊
    没感觉啥惯性。。。
        4
    p1llar   153 天前   ♥ 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()
    }),
    ```
        5
    molvqingtai   153 天前
    @p1llar 感谢!第一次知道这个事件,代码压缩查关键词找到的?
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   886 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 19ms · UTC 20:18 · PVG 04:18 · LAX 12:18 · JFK 15:18
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1