Как исправить работу события scroll при overflow: auto?

Question

[leobrn]

Использую библиотеку Snap.js для меню по свайпу.

В CSS этой библиотеке есть класс, который вешается на весь контент:

.snap-content {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    width: auto;
	   height: auto;
	    z-index: 2;
	  overflow: auto;
	  -webkit-overflow-scrolling: touch;
	}

При таких свойствах у меня не работает событие

window.addEventListener('scroll', function() {
	 //do something
	})

Когда я убираю overflow: auto; все начинает работать. Как правильно изменить класс snap-content для корректной работы со скроллом?

Comments

[alexalexes]

А вы обработчик добавляете до инициализации библиотеки или после?

[leobrn]

alexalexes, после. Сначала подключаю библиотеку потом уже в main.js подключаю обработчик scroll.

[alexalexes]

Попробуйте поставить задержку:

setTimeout(function()
{
  window.addEventListener('scroll', function() {
   //do something
  })
}, 1000);

или прицепить свое событие во время выполнения обработчика onload.

[leobrn]

alexalexes, так тут я как понимаю проблема в классе .snap-content в сочетание свойств position: absolute; и overflow: auto;.

Когда я убираю overflow: auto; в классе все начинает работать. Как задержка или перенос в onload исправят данную ситуацию?

[alexalexes]

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

[leobrn]

alexalexes, попробовал ваши варианты, не взлетело

[alexalexes]

Попробуйте вариант с обработчиком на body.

document.body.addEventListener('scroll', function() {
   //do something
  })

[leobrn]

alexalexes, так не работает даже без свойства overflow: auto;.
Я для эксперимента обернул в setinterval нужные функции, но тогда косяк уже на шаге, когда координаты скрола получаются, window.scrollY всегда 0 выдает.

[leobrn]

alexalexes, сделал вот так

window.addEventListener('scroll', function(event) {
 ListenerScroll()
}, true )

и начал проваливаться в свою процедуру, но остается проблема, что window.scrollY всегда 0

[alexalexes]

Посмотрел документацию по другому свойству: https://developer.mozilla.org/ru/docs/Web/API/Elem...
Там есть такое примечание:

Когда контент элемента не создаёт вертикальную прокрутку, его scrollTop равно 0.

Возможно, это справедливо и для scrollY.

[alexalexes]

У меня бы случай с практики, что событие срабатывает на window, а считывать значения прокрутки нужно на document.body - этот момент тоже посмотрите.

[alexalexes]

Вот функция, по которой я определяю, какой элемент подвержен прокрутке.
Выбор между html и body.

/* Метод определения элемента, подверженного прокрутке, на котором может меняться параметр scrollTop (html или body?)*/
  detect_scrolled_element: function()
  {
    var elem = document.body; // прокручиваемый элемент по умолчанию
    var temp_scrollTop = document.body.scrollTop;
    document.body.scrollTop = 1; // попытка изменить scrollTop
    if(document.body.scrollTop == temp_scrollTop) // нет изменений?
    {
      temp_scrollTop = document.documentElement.scrollTop;
      document.documentElement.scrollTop = 1; // попытка изменить scrollTop
      if(document.documentElement.scrollTop == temp_scrollTop) // нет изменений?
      {
      }
      else // есть изменения, прокручиваемый элемент найден
      {
        document.documentElement.scrollTop = temp_scrollTop;
        elem = document.documentElement;
      }
    }
    else // есть изменения, прокручиваемый элемент найден
    {
      document.body.scrollTop = temp_scrollTop;
      elem = document.body;
    }
    return elem;
  }

Но, как я говорил. Вешаю обработчик на один элемент (document), а читаю свойства scroll - из другого (html или body).

this.scrolled_element_event = document;      // элемент, на котором отслеживается прокрутка страницы
    this.scrolled_element_value = this.detect_scrolled_element(); // определяем, какой элемент cкролится при прокрутке страницы

Закономерность так и не установил, пришлось писать такой финт.

[leobrn]

alexalexes, спасибо за доп инфу, на будущее учту .

Answer 1

[leobrn]

добавил в событие прослушки event и получение координат скрола вместо window.scrollY переделал на event.target.scrollTop

window.addEventListener('scroll', function(event) {
 var scrolltop = event.target.scrollTop;
//do something
}, true )