Прокрутка DIV под абсолютно postitioned элемент

Question

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

Вы можете увидеть сырой JSFiddle здесь: http://jsfiddle.net/41rawrks/

Вы можете прокручивать div с вашей помощью колесика мыши (или сенсорной панели), но если курсор переходит на другой элемент (как показано ниже), вы не можете прокручивать больше , Могу ли я это изменить?

Я предполагаю, что это не потому, что DOM больше не считает курсор быть «над» прокруткой элемента, когда он попадает в перемещаемой один (даже если перетаскиваемым элемент абсолютно позиционирован в прокруткой один).

Что я могу сделать?

Я бы не подумал, что это возможно, но этот сайт делает это!

http://weareeli.dk

Answer 1

раствор представлял собой смесь всего уже упоминалось.

pointer-events: none остановил свиток застревания, но предотвратить перетягивание вариант от работы. Ответ заключался в том, чтобы добавить pointer-events: none к перемещаемому элементу только тогда, когда столбец не прокручивался.

Мониторинг события прокрутки (без мышки) был простым, но я использовал jQuery debounce, чтобы обнаружить, когда прокрутка была остановлена ​​.

scrollers.scroll($.debounce(250, function(){ 
    // Re-enable drag event 
    $(this).next('.decadeHeader').css('pointer-events', 'auto'); 
})); 

Простое решение и работает!

Answer 2

Вы можете добавить указатель событий: ни в CSS для блокирующего элемента (без поддержки в IE10 и ниже, я думаю) или попробовать добавить e.preventDefault на событие MouseEnter/наведении курсора мыши на этом элементе.

Answer 3

При переключении переполнения из # scrollDiv80s его родитель # wrapper80s он работает, как вы хотите:

#scrollDiv80s div { 
    border: 1px solid black; 
} 
#wrapper80s, #wrapper90s, #wrapper00s { 

    overflow-y: scroll; /* look at this */ 
    overflow-x: hidden; /* look at this */ 
    height: 100%; 
    padding-left: 0px; 
    padding-right: 0px; 
    position: relative; 
} 
.decadeHeader { 
    background-color: red; 
    position: absolute; 
    width: 100%; 
    z-index: 99999; 
    font-size: 28px; 
    text-align: center; 
} 
.decadeHeader:hover { 
    cursor: grab; 
    cursor: -webkit-grab; 
} 
#scrollDiv80s { 
    /* overflow from child removed */ 
    border: none; 
    height: 100%; 
} 

Answer 4

В .decadeHeader Никогда не прокручивается, так что он может передать событие прокрутки элемента под. Вам нужно добавить некоторых детей в .decadeHeader, чтобы заставить это работать. Что-то вроде:

Просто введите сценарий «_ezswipe.js» от https://github.com/TNT-RoX/android-swipe-shim в свой html.

<script src="_ezswipe.js" type="text/javascript"></script> 

Затем добавьте класс "_ezswipe" в

<div class="decadeHeader ui-draggable ui-draggable-handle _ezswipe"> 

Наконец добавить немного кода, чтобы передать событие дальше.

function catchEvent(e) { 
    document.querySelector('#scrollDiv80s').scrollTop += (e.detail.delta.y*-1); 
} 
var el = document.querySelector("._ezswipe"); 
el.addEventListener("swipeMove", catchEvent, true); 

Fiddle here http://jsfiddle.net/41rawrks/7/