Материальный дизайн и jQuery, прокрутка не работает

Я не могу использовать метод .scroll jQuery, в то же время включая дизайн материалов Google. Я использовал Material Design Lite для создания панели навигации сайта.

Если я исключаю/удаляю material.min.js, то метод прокрутки в окне работает отлично. Мой простой код jQuery таков:

jQuery(window).scroll(function () {
  console.log("scrolled");
});

Вот JSFiddle http://jsfiddle.net/wwjoxtvp/2/

А вот и codepen:http://codepen.io/MustagheesButt/full/PqBYop/

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


javascript material-design jquery conflicting-libraries
person Mustaghees    schedule 21.07.2015    source источник

Ответы (3)


arrow_upward
3
arrow_downward

По сути, вы должны привязать событие прокрутки к классу .mdl-layout__content, поскольку облегченный дизайн материала делает этот элемент прокручиваемым.

$('.mdl-layout__content').on('scroll', function () {
  console.log('scrolled');  
});
person prototype    schedule 21.07.2015
comment
так что событие прокрутки не всплывает до окна или документа? - person Mustaghees; 21.07.2015
comment
Нет, это не так - можно прокручивать только .mdl-layout__content - облегченный материальный дизайн что-то делает с макетом. - person prototype; 21.07.2015
comment
Что делать, если я хочу применить это только для одной страницы, но .mdl-layout__content включается на всю страницу. - person Rahul Sagore; 13.10.2015
comment
@RahulSagore, затем просто выполните приведенный выше скрипт только на этой конкретной странице. - person prototype; 13.10.2015

arrow_upward
1
arrow_downward

dark4p решил это, но возможной альтернативой является использование:

window.addEventListener('scroll', function(){ console.log('scrolled'); }, true);

true указывает на использование захвата, а не всплывающей обработки, поэтому он все равно будет срабатывать. Однако я не уверен, может ли это иметь какое-либо негативное взаимодействие с материалом.

person ryachza    schedule 21.07.2015
comment
Спасибо. это тоже работает. Я думал только о том, чтобы пузыриться - person Mustaghees; 21.07.2015
comment
Как мы можем проверить, был ли достигнут конец страницы с помощью этого кода? - person Rahul Sagore; 13.10.2015
comment
@RahulSagore Вы должны быть в состоянии рассчитать это, используя .scrollTop и height/.innerHeight. - person ryachza; 13.10.2015

arrow_upward
0
arrow_downward

.mdl-layout__content имеет overflow-y:auto, и вы прокручиваете этот div. Если вы хотите, вы можете изменить это, но я не рекомендую это.

jQuery(document).ready(function(){

    jQuery('.mdl-layout__content').scroll(function(){
console.log('scrolled');
});

});

http://jsfiddle.net/wwjoxtvp/34/

person Fatih Kahveci    schedule 21.07.2015