javascript - 加速我的 Javascript 滚动事件代码

Question

我在我的网络应用程序的侧边栏中添加了一些特殊功能。您可以在我的 testing site 上看到用户界面的概念。 . (关于右侧边栏)

1. 如果滚动到末尾，侧边栏将停止滚动。
2. 此外，侧边栏中有选定的列表项，如果它们滚动出 View ，它们将保留在侧边栏的顶部或底部。

我的代码是使用 jQuery 用 Ja​​vascript 编写的。不幸的是，在我的页面上滚动现在滞后了。这是我的 demo page 的链接(右键单击 -> 显示源代码)及其 javascript file .

我怎样才能加速代码(而且 let 仍然是抽象的)？

我在这里为那些不想点击链接的人粘贴 javascript 代码。

HTML:(示例)

<ul id="right">
    <li><h3>Headline</h3></li>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
    <li><a class="selected">Active Item</a></li>
    <li><a>Item</a></li>
    <li><h3>Headline</h3></li>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
</ul>

Javascript:

var Scrollers = $('#content,#left,#right');
var Scrollable = new Array(Scrollers.length);
var TopOffset = new Array(Scrollers.length);
var BottomOffset = new Array(Scrollers.length);
var OuterHeight = new Array(Scrollers.length);
var OuterHeightAndOffsets = new Array(Scrollers.length);
function ScrollInit(){

    Scrollers.each(function(i){

        // constants
        TopOffset[i] = parseInt($(this).css("margin-top").replace("px",""));
        BottomOffset[i] = parseInt($(this).css("margin-bottom").replace("px",""));
        OuterHeight[i] = parseInt($(this).outerHeight());
        OuterHeightAndOffsets[i] = TopOffset[i] + BottomOffset[i] + OuterHeight[i];

        // classes
        $(this).removeClass('snapped top bottom');

        if(OuterHeightAndOffsets[i] < $(window).height()){
            $(this).addClass('snapped top');
            Scrollable[i] = false;
        } else {
            Scrollable[i] = true;
        }
    });
}
ScrollInit();


var SelectedListitems = $('li.selected');
var SelectedListitemsActive = new Array(SelectedListitems.length); for(var i=SelectedListitems.length; i<0; i++) SelectedListitemsActive[i] = false;
function ScrollCalc(){

    // list item locking
    SelectedListitems.each(function(i){
        if(!($(this).parent().hasClass('snapped top'))){
            var ListItemOffset = $(this).offset().top - $(window).scrollTop();
            var ListItemState=0; // 0:in, 1:above, 2:under
            if(ListItemOffset <= $(this).parent().offset().top){ ListItemState=1; }
            else if(ListItemOffset + $(this).outerHeight() >= $(window).height()){ ListItemState=2; }

            // no snapped clone so far
            if(ListItemState){
                if(SelectedListitemsActive[i]!=true && !$(this).parent().hasClass('snapped')){
                    var AppendClasses = 'clone snapped '; if(ListItemState == 1) AppendClasses += 'top '; else AppendClasses += 'bottom ';
                    $(this).parent().append($(this).clone().addClass(AppendClasses + i));
                    SelectedListitemsActive[i] = true;
                }
            // already snapped, clone existing
            } else {
                if(SelectedListitemsActive[i]==true){
                    $('.clone.snapped.' + i).remove();
                    SelectedListitemsActive[i] = false;
                }
            }
        }
    });

    // scroll container locking
    Scrollers.each(function(i){
        if(Scrollable[i]){
            if($(window).scrollTop()+$(window).height() > OuterHeightAndOffsets[i]){
                $(this).addClass('snapped bottom');
            } else {
                $(this).removeClass('snapped bottom');
            }
        }
    });

    ScrollEvent = false;
}
ScrollCalc();

$(window).scroll(function(){
    ScrollCalc();
});

Answer 1

我刚刚查看了您的链接，相信滞后不是因为您的 javascript。如果您不这么认为，请尝试禁用 window.scroll 事件中的所有脚本，仍然滞后吗？

现在尝试删除所有阴影属性 - box-shadow 和 text-shadow。还要记住在 simple.js 中禁用更改阴影不透明度(在滚动事件期间更改阴影总是滞后的)。

现在你可以看到它运行得非常快!!!返回 css 文件并启用每个阴影属性并找出最适合您的。