Javascript: не останавливайте прокрутку окна, если курсор проходит над прокручиваемым div

Question

Я создаю веб-приложение, в котором есть сетка из множества маленьких прокручиваемых div (на самом деле, Ace редакторов), и эта сетка имеет достаточно элементов, чтобы она была больше окна. Когда пользователь начинает прокручивать пустое пространство, я хочу, чтобы он прокручивал само окно; когда пользователь начинает прокручивать внутри элемента сетки, я хочу, чтобы он прокручивал там содержимое div. Дело в том, что если пользователь начинает прокручивать пустое пространство, а затем прокручивает его так, что его мышь перемещается по элементу сетки, этот прокручиваемый div захватывает все события прокрутки, прерывая поток пользователя по сетке и «задерживая» их внутри сетки. элемент.

Я не могу вручную захватить onmousewheel события, поскольку AFAIK не позволяет фиксировать горизонтальное движение колеса мыши отдельно от вертикали, и я хочу, чтобы пользователи в Mac OS X могли прокручивать их во всех направлениях. Я думал об использовании JS для добавления невидимого div с очень высоким z-индексом к первому событию onscroll и удаления его, как только события onscroll не будут запущены в течение определенного периода времени. Я еще не закодировал это, но мне интересно, есть ли лучшее решение, или есть какие-нибудь потенциальные ловушки, о которых я не думал. Любая помощь или совет будут великолепны! Спасибо!

Answer 1

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

Вы могли бы сделать что-то вроде этого:

$('div').scroll(function(e){
    // figure out how much it has scrolled
    window.scrollBy(0,howmuch);
});

Я не рекомендую это решение ни в малейшей степени, хотя, я думаю, лучшим вариантом было бы установить div для переполнения: скрытый;и выберите плагин с твердой прокруткой и используйте его для настройки поведения прокрутки в элементах div.