Пролистайте только элемент страницы, а не всю страницу

Когда-нибудь замечаете, что когда вы прокручиваете переполненный div или текстовую область с помощью колесика мыши, и вы прокручиваете ее донизу, вся страница начинает прокрутку?Пролистайте только элемент страницы, а не всю страницу

Можно ли предотвратить это?

Я быстро проверил обработчик события jQuery(), но, похоже, слишком поздно.

Вот тестовый код, если вы хотите поиграть.

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(function() { 
    $('#scroller').scroll(function() { 
     $('#notification').css('display','block').fadeOut(); 
     return false; 
    }) 
    }) 
    </script> 
</head> 
<body style="height: 2000px"> 
    <div id="scroller" style="width: 500px; height: 500px; overflow: scroll; margin: 50px"> 
    <div style="width: 1000px; height: 1000px; background: #ddd"></div> 
    </div> 
    <div id="notification" style="display:none">Bang</div> 
</body> 
</html>

источник

2010-07-28 lawrence

Firefox 4 реализует это поведение по умолчанию! Ура! – lawrence

Этот JS будет делать это, в основном просто установить переполнение тела, чтобы скрытые, когда мышь находится над сНу # скроллер затем установить его в нормальное состояние, когда вы разнюхивать.

$("#scroller").hover(
    function() { 
     $('body').css('overflow','hidden'); 
    }, 
    function() { 
     $('body').css('overflow','auto'); 
    } 
);

Испытано на Safari, Firefox и IE8

источник

2010-07-28 21:36:50 Steve

потрясающий! Благодарю. – lawrence

Мне жаль, что мы не можем заставить всех в Интернете реализовать это. – lawrence

Пролистайте только элемент страницы, а не всю страницу

ответ

Смежные вопросы