Отключение прокрутки мышью - PullRequest
Новая
       19

Отключение прокрутки мышью

6 голосов
/ 27 октября 2011

У меня есть страница с текстовым полем.Когда я прокручиваю текстовое поле до конца, документ прокручивается после него.Как отключить прокрутку мыши для документа, но включить прокрутку для текстового поля, когда мышь находится над текстовым полем?Мне нужно только отключить прокрутку мыши, а не полосы прокрутки окна.

Страница имеет фиксированный размер, и полосы прокрутки будут только в том случае, если окно браузера не развернуто.Я думаю, что документ имеет размер 800x600 пикселей и подходит большинству пользователей.

Я использую JavaScript с jQuery.

Ответы [ 4 ]

3 голосов
/ 27 октября 2011

Вы можете попробовать следующее 

 <script type="text/javascript">
             function stop()
             {
                 return false;
             }
             document.onmousewheel=stop;
    </script>

Вы также можете сделать это в CSS, если решите сделать это, используя следующее: 

body{
overflow: hidden;
}

С макушки головы Iпридумал это.Если вы не хотите, чтобы они прокручивались, вы также можете добавить некоторые вещи в свой класс CSS, например:

Надеюсь, это поможет!

Счастливого кодирования!;)

2 голосов
/ 27 октября 2011 
$('#txt').hover(function (){
    $('body').css('overflow','hidden');
}, function (){
    $('body').css('overflow','auto');
})
2 голосов
/ 27 октября 2011

Используйте следующий код для отключения прокрутки: 

if(window.addEventListener){ //Firefox only
    window.addEventListener("DOMMouseScroll", function(e){e.preventDefault()}, true);
}
window.onscroll = function(e){e.preventDefault()};

По поводу совместимости см .: http://www.quirksmode.org/dom/events/scroll.html

0 голосов
/ 27 февраля 2018

Это решение аналогично Sameera, но без Jquery : 

var azul = document.getElementById("azul");

azul.onmouseover = function(){
   document.body.style.overflowY = "hidden";
};

azul.onmouseout = function(){
   document.body.style.overflowY = "auto";
};
#total{
  height: 900px;
}

#amarela{
  background-color: yellow;
  height:50%;
}

#azul{
  background-color: blue;
  height:50%;
}
<div id="total">
  <div id="amarela"></div>
  <div id="azul"></div>
</div>
...