Прокрутить список событий javascript

Есть ли js-слушатель, когда пользователь прокручивается в определенном текстовом поле, которое можно использовать? Как будто onclick, кроме прокрутки. Я видел прослушиватель событий HTML5 для прокрутки ввода номера - только Chrome, но это похоже только на хром. Я ищу что-то кросс-браузер.

Ответ 1

Для тех, кто нашел этот вопрос в надежде найти ответ, не связанный с jQuery, вы подключаетесь к window "прокручивать" событие, используя обычное прослушивание событий. Скажем, мы хотим добавить прокрутку для прослушивания нескольких CSS-селекторов:

// what should we do when scrolling occurs
var runOnScroll =  function(evt) {
  // not the most exciting thing, but a thing nonetheless
  console.log(evt.target);
};

// grab elements as array, rather than as NodeList
var elements = document.querySelectorAll("...");
elements = Array.prototype.slice.call(elements);

// and then make each element do something on scroll
elements.forEach(function(element) {
  window.addEventListener("scroll", runOnScroll);
});

Для получения бонусных баллов вы можете предоставить обработчику прокрутки механизм блокировки, чтобы он не работал, если мы уже прокручиваем:

// global lock, so put this code in a closure of some sort so you're not polluting.
var locked = false;
var lastCall = false;

var runOnScroll =  function(evt) {
  if(locked) return;

  if (lastCall) clearTimeout(lastCall);
  lastCall = setTimeout(() => {
    runOnScroll(evt);
    // you do this because you want to handle the last
    // scroll event, even if it occurred while another
    // event was being processed.
  }, 200);

  // ...your code goes here...

  locked = false;
};

Ответ 2

Я много искал, чтобы найти решение для стильного меню со старой школой JS (без JQuery). Поэтому я строю небольшой тест, чтобы поиграть с ним. Я думаю, что это может быть полезно для тех, кто ищет решение в js. Он нуждается в улучшении отладки меню и делает его более гладким. Также я нахожу хорошее решение с JQuery, которое клонирует оригинальный div вместо фиксированной позиции, тем лучше, так как остальная часть страницы не требуется заменять после исправления. Кто-нибудь знает, что с JS? Пожалуйста, отметьте, исправьте и улучшите.

<!DOCTYPE html>
<html>

<head>
<script>

// addEvent function by John Resig:
// http://ejohn.org/projects/flexible-javascript-events/

function addEvent( obj, type, fn ) {

    if ( obj.attachEvent ) {

        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
        obj.attachEvent( 'on'+type, obj[type+fn] );
    } else {
        obj.addEventListener( type, fn, false );
    }
}
function getScrollY() {
    var  scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;

    } else if( document.body && document.body.scrollTop )  {
        //DOM compliant
        scrOfY = document.body.scrollTop;
    } 
    return scrOfY;
}
</script>
<style>
#mydiv {
    height:100px;
    width:100%;
}
#fdiv {
    height:100px;
    width:100%;
}
</style>
</head>

<body>

<!-- HTML for example event goes here -->

<div id="fdiv" style="background-color:red;position:fix">
</div>
<div id="mydiv" style="background-color:yellow">
</div>
<div id="fdiv" style="background-color:green">
</div>

<script>

// Script for example event goes here

addEvent(window, 'scroll', function(event) {

    var x = document.getElementById("mydiv");

    var y = getScrollY();      
    if (y >= 100) {
        x.style.position = "fixed"; 
        x.style.top= "0";
    } 
});

</script>
</body>
</html>

Ответ 3

Не будет ли ваш базовый подход ниже ваших требований?

Код HTML, имеющий div

<div id="mydiv" onscroll='myMethod();'>

JS будет иметь код ниже

function myMethod(){ alert(1); }

Ответ 4

Есть ли слушатель js, когда пользователь прокручивает текст в определенном текстовом поле, которое можно использовать?

Спецификация событий пользовательского интерфейса DOM L3 дала первоначальное определение, но считается устаревшей.

Чтобы добавить один обработчик, вы можете сделать:

  let isTicking;
  const debounce = (callback, evt) => {
    if (isTicking) return;
    requestAnimationFrame(() => {
      callback(evt);
      isTicking = false;
    });
    isTicking = true;
  };
  const handleScroll = evt => console.log(evt, window.scrollX, window.scrollY);
  document.defaultView.onscroll = evt => debounce(handleScroll, evt);

Для нескольких обработчиков или, если это предпочтительнее по стилю, вы можете использовать addEventListener а не назначать обработчик для onscroll как показано выше.

Если вы используете что-то вроде _.debounce от lodash, вы, вероятно, можете обойтись без:

const handleScroll = evt => console.log(evt, window.scrollX, window.scrollY);
document.defaultView.onscroll = evt => _.debounce(() => handleScroll(evt));

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