堆栈内存溢出
  繁体   English   中英

使用 window.requestAnimationFrame() 将 jQuery animate({scrollLeft: x}) 迁移到 vanilla JS

[英]Migrate jQuery animate({scrollLeft: x}) to vanilla JS using window.requestAnimationFrame()

 leemon  2023-01-22 22:58:37  37   1    javascript/ animation/ scroll/ requestanimationframe

提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。

问题描述

我正在尝试迁移一些 jQuery 代码，这些代码在单击其图像时（将单击的图像放在浏览器视口的中心）在水平图像库中执行平滑滚动（来回）：

jQuery：

$('.page-template-format-horizontal .exhibit-image').on('click', function (e) {
    var slideWidth = $(this).width();
    var windowWidth = $(window).width();
    var scrollTo = $(this).position().left;
    var offset = scrollTo - (windowWidth / 2) + (slideWidth / 2);
    $('html, body').animate({
        scrollLeft: offset
    }, 500);
    e.preventDefault();
});

这是我想出的普通 JS 代码。 我知道我可以使用behaviour: 'smooth' window.scrollBy() ，但我想改用window.requestAnimationFrame() function，因为我需要支持一些较旧的 8837867556'588 版本支持平滑行为选项。

记者：

document.querySelector('.page-template-format-horizontal .exhibit-image').addEventListener('click', function (e) {
    var slideWidth = e.currentTarget.getBoundingClientRect().width;
    var windowWidth = window.innerWidth;
    var scrollTo = e.currentTarget.offsetLeft;
    var offset = scrollTo - (windowWidth / 2) + (slideWidth / 2);

    var duration = 50;
    var startLocation = window.pageXOffset;
    var endLocation = offset;
    var distance = endLocation - startLocation;
    var increments = distance / (duration / 16);

    function step() {
        window.scrollBy(increments, 0);
        if ( window.pageXOffset <= endLocation) {
            window.requestAnimationFrame(step);
        }
    }
    window.requestAnimationFrame(step);
    e.preventDefault();
});

它非常有效，但只是在向右滚动时，而不是向左滚动。 任何帮助，将不胜感激。

1 条回复

1楼
 leemon  0  2023-01-24 10:39:07

我设法自己解决了这个问题。 这是我想出的代码：

document.querySelectorAll('.page-template-format-horizontal .exhibit-image').forEach(function(item) {
    item.addEventListener('click', function (e) {
        var slideWidth = e.currentTarget.getBoundingClientRect().width;
        var windowWidth = window.innerWidth;
        var scrollTo = e.currentTarget.offsetLeft;
        var startLocation = window.pageXOffset;
        var endLocation = scrollTo - (windowWidth / 2) + (slideWidth / 2);
        var distance = endLocation - startLocation;
        var duration = 400;
        var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
        var start;

        if (!distance) {
            return;
        }

        function step(timestamp) {
            start = start || timestamp;
            var time = timestamp - start;
            var percent = Math.min(time / duration, 1);
            percent = easing(percent);
            window.scrollTo(parseInt(startLocation + distance * percent), window.scrollY);
            if (time < duration) {
                window.requestAnimationFrame(step);
            }
        }
        window.requestAnimationFrame(step);
        e.preventDefault();
    });
});
问题未解决？试试本站强大的搜索功能，搜索： 使用 window.requestAnimationFrame() 将 jQuery animate({scrollLeft: x}) 迁移到 vanilla JS。
使用对象和此关键字的window.requestAnimationFrame

[英]window.requestAnimationFrame using object and this keyword

我正在使用javascript学习物理引擎的基础知识，并希望将所有引擎和游戏数据保存在一个对象中，但是在递归调用draw函数为场景设置动画时无法使用'this'关键字。 我可以成功调用有效的单独绘制函数，但要实现多个动画对象并不容易 这是一个带有工作台的简单Codepen 。 这是 ...

window.requestAnimationFrame的唯一触发

[英]Unique triggering of window.requestAnimationFrame

我正在使用函数window.requestAnimationFrame。 我不知道为什么，但是当我单击“播放”时，它只是连续触发一次，而不是连续触发 的HTML是 coffeeScript中的代码 Codepen中的脚本： http ://codepen.io/hel ...

画布动画（window.requestAnimationFrame）

[英]Canvas animations (window.requestAnimationFrame)

因此，我是一名画布新手，并且编写了一些代码来尝试创建动画。 我想用抛物线方程式使球移动，所有工作都很好，除了事实是，我基本上没有使用动画，而是用弧线制成了抛物线。 这是我用于动画的代码片段： 在chrome的控制台中，我收到此错误： 谢谢您的帮助！ ...

window.requestAnimationFrame冻结浏览器窗口

[英]window.requestAnimationFrame freezes browser window

我正在尝试使用Canvas通过以下代码在JS中制作动画，但是window.requestAnimationFrame运行时告诉它冻结了浏览器窗口： const renders = function(){ //resize document.getElementById('main ...

Window.requestAnimationFrame（）与stopImmediatePropagation结合使用不起作用

[英]Window.requestAnimationFrame() not workig in combination with stopImmediatePropagation

我正在尝试加快网页速度，但是由于我是JavaScript新手，所以优化并非没有错误。 我创建了要与Window.requestAnimationFrame（）结合使用的onclick过渡效果。 当我添加以下代码行时，我会获得过渡效果，但控制台中会弹出一条错误消息： 未被捕获的TypeE ...

window.requestAnimationFrame（）如何工作？

[英]How does the window.requestAnimationFrame() work?

我如何理解以下代码？ 我对JavaScript有点陌生。 我在这里得到这段代码： https : //developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame 我想问的是关于function ste ...

回调函数作为window.requestAnimationFrame（）的参数

[英]callback function as argument of window.requestAnimationFrame()

我在使用requestAnimationFrame（）的js文件中。 我知道参数应该是回调函数。 我认为我的论点是回调函数，但错误出现在js控制台中： TypeError：Window.requestAnimationFrame的参数1不是对象。 file.js： ...

如何在 React 中加速 window.requestAnimationFrame？

[英]How to speed up window.requestAnimationFrame in React?

我目前正在开发 Snake 类型的游戏。 目前，我正在更新每个渲染调用的下一步，但是它给蛇带来了一种缓慢的速度。 我试图增加每次调用中渲染的步骤数，但它看起来很奇怪而且有问题。 有什么办法可以快速做到这一点？ 另外：以前我在p5.js中做过这个，有draw() function真的很快。 动画看起 ...

jQuery：计算相对于$（window）的&#39;margin-left&#39;或&#39;left&#39;。scrollLeft（）在Firefox中确实参差不齐-使用.animate（）或.css（）

[英]jquery: calculating 'margin-left' or 'left' relative to $(window).scrollLeft() is really jagged in Firefox — using .animate() or .css()

我有一个水平滚动的网站，并且我想在用户向右滚动时始终保持框住状态。 它在webkit浏览器中看起来非常流畅，但在Firefox中却疯狂地锯齿了，我并不真正在意IE。 然后在窗口滚动中触发它。 求平均滚动效果的最佳方法是什么，这样可能每隔几秒钟或滚动像素就会触发该功能，或者在停止滚 ...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 window.requestAnimationFrame（）使用对吗？ 使用对象和此关键字的window.requestAnimationFrame window.requestAnimationFrame的唯一触发 画布动画（window.requestAnimationFrame） window.requestAnimationFrame冻结浏览器窗口 Window.requestAnimationFrame（）与stopImmediatePropagation结合使用不起作用 window.requestAnimationFrame（）如何工作？ 回调函数作为window.requestAnimationFrame（）的参数 如何在 React 中加速 window.requestAnimationFrame？ jQuery：计算相对于$（window）的&#39;margin-left&#39;或&#39;left&#39;。scrollLeft（）在Firefox中确实参差不齐-使用.animate（）或.css（）
相关标签
 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM