jQuery中的生涩滚动动画-解网

问：

我在这个网站上工作 https://staging.sophiepeirano.com/fr/ 不幸的是，滚动在 chrome 上很生涩，但在 firefox 中却没有如何纠正chrome上的错误？这是前面的JS文件，所以你可以帮我

我试图在第一个元素上使用纯 JS 而不是 jQuery，但没有任何变化

<script>
                $=jQuery;
        //$(window).on('scroll', function(e) {
        window.addEventListener('scroll', function (e) {
                        var ScrollVal = $(document).scrollTop();
            if(ScrollVal < window.innerWidth) {

                //$('[data-scroll-id=content]').css({'left': '-'+ScrollVal+"px", 'top': ''+ScrollVal+"px"});
                //$('[data-scroll-id=content]').css('top', ''+ScrollVal+"px");
               var dsid = document.querySelector("[data-scroll-id=content]");
                            dsid.style.left = '-'+ScrollVal+"px";
                            dsid.style.top = ''+ScrollVal+"px";
            }
            else if(ScrollVal >= window.innerWidth && ScrollVal < window.innerWidth*2+$('[data-scroll-id=presentation] > *').height()) {
                relativeScroll = ScrollVal-window.innerWidth;
                $('[data-scroll-id=content]').css('left', '-'+window.innerWidth+"px");
                $('[data-scroll-id=content]').css('top', ''+ScrollVal+"px");
                $('[data-scroll-id=presentation] > *').css('marginTop', '-'+(relativeScroll/2)+"px")
            }
            else if (ScrollVal >= window.innerWidth*2+$('[data-scroll-id=presentation] > *').height() && ScrollVal < (window.innerWidth*3+$('[data-scroll-id=presentation] > *').height())) {
                console.log('the 3')
                relScroll = ScrollVal-(window.innerWidth*2+$('[data-scroll-id=presentation] > *').height())
                $('[data-scroll-id=content]').css('top', ''+ScrollVal+"px");
                $('[data-scroll-id=content]').css('left', '-'+window.innerWidth-relScroll+"px");
            }
            else if (ScrollVal >= (window.innerWidth*3+$('[data-scroll-id=presentation] > *').height()) && ScrollVal < (window.innerWidth*3+$('[data-scroll-id=presentation] > *').height()+$('[data-scroll-id=services] > *').height())) {
                console.log('the 4')
                relScroll = ScrollVal-(window.innerWidth*2+$('[data-scroll-id=presentation] > *').height()+window.innerWidth)
                $('[data-scroll-id=content]').css('top', ''+ScrollVal+"px");
                $('[data-scroll-id=content]').css('left', '-'+window.innerWidth*2+"px");
                $('[data-scroll-id=services] > *').css('marginTop', '-'+(relScroll/2)+"px")
            }
        })
    </script>

javascript jquery css 动画滚动

它在我的Firefox中也不是完全流畅的。如果没有关于代码的哪一部分确切“混蛋”的更多细节，我会打赌性能问题。例如，jQuery 调用很容易编写，因为它很短，但很容易忘记它们是搜索所有 DOM 树的函数调用。所有调用（如）都可以存储在事件处理程序之外的 vatiable 中，这将节省相当多的计算。另外，很抱歉很直接，这个滚动布局是一个有趣的编码练习，但我发现它不容易阅读（只是我的意见）$(document)$('[data-scroll-id=content]')

0赞 Kaddath 11/17/2023

（第 2 部分）......也许只是一些微调，以找到横向部分开始到达侧面的点，例如为过渡添加空白空间，但是当它们开始出现时，截断的部分很难阅读或不可能。也许易用功能会有所帮助，我不知道

答： 暂无答案

上一个：如何触发在通过jQuery之前附加的点击事件之前附加的点击事件？

下一个：下载具有数据 URI 的多个文件

jQuery中的生涩滚动动画

Jerky scroll animation in jQuery

评论