Ускорить мой код события прокрутки Javascript - PullRequest
Новая
       13

Ускорить мой код события прокрутки Javascript

4 голосов
/ 25 февраля 2012

Я добавил некоторые специальные функции на боковую панель моего веб-приложения.Вы можете увидеть концепцию пользовательского интерфейса на моем сайте тестирования .(Это касается правой боковой панели)

  1. Боковая панель прекращает прокрутку, если она прокручивается до конца.
  2. Кроме того, на боковой панели есть выбранные элементы списка, которые остаются сверху или снизу.боковой панели, если они будут прокручиваться из вида.

Мой код написан на Javascript с использованием jQuery.К сожалению, прокрутка на моей странице запаздывает.Вот ссылки на мою демонстрационную страницу (щелчок правой кнопкой мыши -> показать исходный код) и файл javascript .

Как мне ускорить код (и пусть все еще абстрактно) ?

Я вставляю сюда код 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();
});

Ответы [ 2 ]

4 голосов
/ 25 февраля 2012

Я только что посмотрел на вашу ссылку и считаю, что задержка не из-за вашего JavaScript . Если вы так не думаете, попробуйте отключить все сценарии в событии window.scroll, все еще отстает, верно?

Теперь попробуйте удалить все свойства тени - box-shadow и text-shadow. Также не забудьте отключить изменение непрозрачности тени в simple.js (изменение тени во время события прокрутки всегда запаздывает).

Теперь вы можете видеть, как он работает очень быстро !!! Вернитесь к файлу css и включите все свойства теней и выясните, что наиболее подходит для вас.

3 голосов
/ 25 февраля 2012

Существует гораздо более быстрый и простой способ получить желаемый эффект.

Попробуйте: когда окно прокручивается достаточно далеко, установите для свойства css position на боковой панели значение fixed.При прокрутке вверх установите position боковой панели на relative.

var sidebar = document.getElementById ('side'), section;

sidebar.style.position = 'относительный';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/

...