Тело Javascript не прокручивает родитель, пока ребенок завис

Question

Тело Javascript не прокручивает родитель, пока ребенок завис

0

<style>
#scrollable{
    width: 300px;
    height: 300px;
    overflow: scroll;
}

#contents{
    width: 500px;
    height: 500px;
    position: relative;
}

#element{
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 200px;
    height: 80px;
}

</style>
<div id="scrollable">
    <div id="contents">
        <div id="element">
            While this is hovered, #scrollable should not scroll
        </div>
    </div>
</div>

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

user3325976 15 апр. 2014, в 12:08

Источник

0

Вы не можете предотвратить событие прокрутки, поэтому вам придется удалить полосы прокрутки или использовать элемент в качестве наложения и т. Д.
adeneo 15 апр. 2014, в 09:38
1

Я не знаю что ты спрашиваешь
Scott 15 апр. 2014, в 09:42

Теги:

javascript

jquery

html

css

2 ответа

0

Демо-скрипт

Поскольку вы не можете прервать и отменить событие прокрутки напрямую, используя jQuery, вы можете просто изменить свойство переполнения прокручиваемых элементов:

$('#element').on('mouseover',function(){
    $('#scrollable, html, body').css('overflow','hidden');
});
$('#element').on('mouseout',function(){
    $('#scrollable, html, body').css('overflow','auto');
});

SW4 15 апр. 2014, в 07:56

0

Все отлично, но мне нужны эти полосы прокрутки
user3325976 15 апр. 2014, в 09:49

Ещё вопросы

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

Manas Atabaev · Accepted Answer · 2014-04-15T09-32-00.000Z

$('#element').on({
'mousewheel': function(event) {
    event.preventDefault();
    event.stopPropagation();
    },
'DOMMouseScroll': function(event) {
    event.preventDefault();
    event.stopPropagation();
}
});

демонстрация

Как раз то, что я искал, этот hover не будет работать для Firefox, вам понадобится другой идентификатор события