加速我的Javascript滾動事件代碼

我在我的web應用程序的側邊欄中添加了一些特殊功能。您可以在我的testing site上看到用戶界面的概念。（這是關於右側邊欄）加速我的Javascript滾動事件代碼

側欄停止滾動，如果它滾動到其結尾。
此外，如果側欄會從視圖中滾動出來，則會在側欄的頂部或底部保留選定的列表項。

我的代碼是用JavaScript編寫的，使用jQuery。不幸的是，我的網頁上滾動現在滯後。這裏是我的demo page（右鍵 - >顯示源代碼）及其javascript file的鏈接。

我該如何加快代碼（而且仍然是抽象的）？

我粘貼這裏的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(); 
});

來源

2012-02-25 danijar

我只是看看你鏈接，並相信滯後是因爲你的JavaScript的不是。如果你不這麼認爲嘗試禁用window.scroll事件中的所有腳本，仍然是正確的？

現在嘗試刪除所有陰影屬性 - 盒陰影和文字陰影。還要記住要禁用更改simple.js中的陰影不透明度（在滾動事件期間更改陰影始終爲laggy）。

現在你可以看到它跑得非常快！回到css文件並啓用每個陰影屬性，並找出最適合你的東西。

來源

2012-02-25 14:47:43

你的權利，沒有'盒子陰影'是非常光滑的。順便說一句，只是在simple.js中改變陰影不透明度不是很落後，非常感謝！ – danijar 2012-02-25 14:59:35

有一個更快，更簡單的方式來獲得你想要的效果。

試試這個：當窗口向下滾動得足夠遠時，將側邊欄的css position屬性設置爲fixed。當它向上滾動時，將邊欄的position設置回relative。

變種側邊欄=的document.getElementById（ '側'），部;

sidebar.style.position ='relative'; sidebar.style.bottom ='0px'; sidebar.style.right ='0px';

window.onscroll = function(){ 
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, 
     maxTop = section ? section.offsetTop : sidebar.offsetHeight - window.innerHeight; 
    sidebar.style.top = sidebar.style.bottom = null; 
    if (scrollTop > maxTop) { 
     if (section) { 
      sidebar.style.top = - section.offsetTop + 'px'; 
     } else { 
      sidebar.style.bottom = '0px'; 
     } 
     sidebar.style.position = 'fixed'; 
    } else { 
     sidebar.style.position = 'relative'; 
    } 
}

你可以看到它在這裏工作 - http://jsfiddle.net/cL4Dy/

來源

2012-02-25 12:56:52

鎖定側邊欄只是第一個功能。你的小提琴不適合我，但我的解決方案几乎相同。相反，編輯屬性我添加了類（'snapped底部'）。請在我的JS代碼中查看塊'//滾動容器鎖定'。也許需要很多時間添加/刪除類？ – danijar 2012-02-25 13:16:45

我編輯了我的代碼以在更多瀏覽器中工作;）我將在一分鐘內看看第二部分。 – 2012-02-25 14:07:34

@sharethis好吧，編輯爲帳戶選定的項目（點擊標題選擇它們[這裏]（http://jsfiddle.net/cL4Dy/）） – 2012-02-25 14:29:09

加速我的Javascript滾動事件代碼

回答

相關問題