繁体   English   中英

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

[英]Migrate jQuery animate({scrollLeft: x}) to vanilla JS using window.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();
});

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

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

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.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM