2013-03-13 3 views
0

На моей странице есть DIV с переполнением, и я поместил две кнопки по обе стороны от div, чтобы действовать как вторичные методы прокрутки.Определение того, когда пользователь прокручивается до конца DIV

При нажатии на левую кнопку, следующий скрипт запускается и, кажется, работает отлично:

 function slideLeft() { 
     if ($("#divfieldWidgets").scrollLeft() == 0) { 
      $('#divScrollWidgetsLeft').animate({ opacity: 0.1 }, 250); 
      window.clearInterval(animationHandler); 
     } 
     $('#divfieldWidgets').animate({ scrollLeft: "-=100px" }, 250); 
    } 

Однако я просто не могу показаться, чтобы быть в состоянии найти способ, чтобы определить, когда DIV ударил его предел при прокрутке вправо.

Я уверен, что мне нужен некоторый расчет на основе $ ("# divfieldWidgets"). ScrollLeft() и $ ("# divfieldWidgets"). Width(), но все арифметические вычисления, которые я выполнил на этих двух значения не приводят к каким-либо результатам, которые показывают какое-либо отношение к ширине, максимальному и т. д.

Существует один единственный вариант, о котором я думал, и это сохранение текущего значения scrollLeft во временной переменной и сравнение нового стоимость; если нет никаких изменений, то он достиг конца, но я уверен, что должен быть более чистый способ достижения этого.

Любые мысли?

+2

Я думаю, вы можете использовать [это] (http://jsfiddle.net/cNmhR/24/) –

+0

@ Салман - любой шанс вы можете опубликовать это как решение, а не комментарий, он работает PERFECT !!! Спасибо. – JasonMHirst

+1

Если я правильно помню, вам может понадобиться использовать внешнюю ширину во внутреннем элементе, если задействованы поля. – SoonDead

ответ

1

Вы можете использовать что-то вроде

$(function() { 
    $('#lorem').scroll(function() { 
     if ($('#lorem').scrollLeft() == ($('#lorem p').width() - $('#lorem').width())) { 
      alert('end!'); 
     } 
    }); 
}); 

Как показано here

Я хотел бы предложить магазин width на ready в переменных, доступных внутри scroll события

a = $('#lorem p').width(); 
b = $('#lorem').width(); 

и использовать их в функции

if ($('#lorem').scrollLeft() == (a - b)) { 
    // rest of the code 
} 

Таким образом, вы сохраните еще несколько вызовов функций на scroll. Поскольку это очень дорогостоящее событие, которое вы должны использовать, только если другого решения нет.

В идеале вы должны использовать дросселируемые функции, такие как this. Это задержит вызов функции и сэкономит массу ресурсов.

Смежные вопросы