Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Небольшая, но неприятная, ошибка в кастомном скроллере (https://javascript.ru/forum/misc/55424-nebolshaya-no-nepriyatnaya-oshibka-v-kastomnom-skrollere.html)

Velidan 27.04.2015 11:38

Небольшая, но неприятная, ошибка в кастомном скроллере
 
Доброго дня уважаемое сообщество. Очень нужна ваша помощь, так как сам не могу справиться.
Пытаюсь сделать кастомный скроллер. Все получилось и работает, единственный нюанс, немного барахлит прокрутка контента, когда тяну за ползунок. Иногда все нормально, а иногда, когда отпустишь мышку и опять потянешь, то ползунок до конца доходит, а контент нет. И последняя строчка "съеденная" наполовину.

Подскажите пожалуйста, может я неправильный алгоритм или формулу выбрал? или что-то не так делаю.

<div class="scrollBox">
                                      <div class="scrollBoxFixer">
                                        <ul class="scrollBoxContent">
                                            <li>Probe S1</li>
                                            <li>VFX9-4 linear probe</li>
                                            <li>X300 Premium Edition</li>
                                            <li>Sonoline Antares (CRT-monitor)</li>
                                            <li>P8-4 Pediatric Cardiac Probe</li>
                                            <li>VFX13-5 linear probe</li>
                                            <li>VFX13-5 linear probe</li>
                                            <li>VFX13-5 linear probe</li>
                                            <li>VFX13-5 linear probe</li>
                                            <li>VFX13-5 linear probe</li>
                                            <li>VFX13-5 linear probe</li>
                                        </ul>
                                      </div>
<div class="scrollBarWrap"><span class="scrollBar"></span></div>
                                    </div>


WellScroller.prototype.scrollOnDrag = function(scrollControl){
    var delta, newTop;
    scrollBar.prevTop = scrollControl.prevTop || 0; //смещение ползунка сверху


    delta =  scrollControl.style.top.replace(/px/,'') - scrollControl.prevTop; //высчитываю текущее смещение.
    delta = (delta / this.contentFixer.clientHeight) * this.content.scrollHeight; //высчитываю коэффициент смещения. this.contentFixer.clientHeight - видимая высота scrollBoxFixer, this.content.scrollHeight - полная высота scrollBoxContent
    delta = delta-(delta%1); (округление)


    newTop = this.contentFixer.scrollTop + delta; //конечное значение на сколько нужно проскролить контент


    this.contentFixer.scrollTop = newTop ; //скролим


    scrollControl.prevTop = scrollControl.style.top.replace(/px/,''); //сохраняем значение текущей прокрутки, для дальнейших подсчетов

    console.dir(scrollControl.prevTop + " || "+newTop); //проверяю, что у нас имеется
};

рони 27.04.2015 12:18

Velidan,
сделали бы полноценный макет - а так только гадать может offsetHeight нужен а не clientHeight


Часовой пояс GMT +3, время: 08:55.