как заставить селектор jQuery работать во всем окне браузера

Привет, я использую расширение колесика мыши jQuery

и он использует следующую привязку

$('html').bind('mousewheel', function(event, delta) {
  window.scrollBy(-120 * delta, 0);
  return false;
});

Дельта определяется движением колесика мыши и прокруткой страницы по горизонтали.

Все в порядке, за исключением случаев, когда вы перемещаете курсор на пустое место, где нет текста или изображения, как правило, нет элемента html, тогда движение колесика мыши внезапно перестает реагировать. Я уверен, что это из-за того, как работает привязка.

Я сделал невидимый 100% на 100% фиксированный pos div, чтобы проверить свою теорию, и прокрутка будет работать отлично. Хотя мне это кажется хаком, и мне было интересно, как правильно реализовать этот код.

Как я могу заставить эту функцию вызываться по всей странице браузера?

Большое спасибо!

Обновление. Дэвид выступил с инициативой создать тестовую страницу со своим кодом здесь. Может ли кто-нибудь сказать мне, работает ли это для вас, как и для него? У меня это не работает, то есть я могу прокручивать страницу только по горизонтали, только если мой указатель находится над красным прямоугольником.


binding jquery mousewheel css-selectors
person Mohammad    schedule 15.02.2010    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы пытались привязать его к document или window?

$(document).bind('mousewheel', function(event, delta) {
  window.scrollBy(-120 * delta, 0);
  return false;
});
person David Hellsing    schedule 15.02.2010
comment
ах, я только что попробовал это без везения. Все еще работает так же :( это необычно? Спасибо!! - person Mohammad; 15.02.2010
comment
Я, вероятно, звучу здесь немного нубски, но можно ли вдохновиться самим кодом и привязать функцию к движению колесика мыши? ссылка: github.com/brandonaaron/jquery-mousewheel/blob/ мастер/ - person Mohammad; 15.02.2010
comment
спасибо за создание этой страницы Дэвид. Для меня, как в Safari, так и в Chrome, мне нужно навести курсор на красный прямоугольник, чтобы колесико мыши переместило страницу. Какой браузер вы используете? - person Mohammad; 16.02.2010

arrow_upward
0
arrow_downward

Я столкнулся с точно такой же проблемой, и мне удалось ее решить, см. это, например.

CSS

html,body
{
    width:100%;
    height:100%;
    overflow:hidden;
    margin:0;
    padding:0;
}

#wrapper
{
    width:100%;
    height:100%;
    overflow:auto;
}

Обратите внимание, что вам нужно применить событие колесика мыши к элементу #wrapper.

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

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

person danjayrose    schedule 28.02.2013