Отключите колесико мыши с jQuery для ID, но не для Class (и всех дочерних классов) Inside ID - PullRequest
Новая
       5

Отключите колесико мыши с jQuery для ID, но не для Class (и всех дочерних классов) Inside ID

1 голос
/ 26 марта 2020

Fiddle: https://jsfiddle.net/1kde9swu/

html: 

<div id="section-2">
  <div class="scroll_sec">
  <div class="inner">
  .... content with overflow....
  </div>
  </div>
</div>

Попытка отключить колесико мыши на всех #section-2, но в то же время разрешить это в целом .scroll_sec и его содержимое.

jQuery: 

$("#section-2").not( ".scroll_sec" ).bind("mousewheel", function() {
    return false;
});

Но, как вы можете видеть в скрипте, все из #section-2 отключено из колесо мыши, в том числе внутри .scroll_sec

Как бы я go сделал это? Очевидно, .not() не является решением, поскольку, похоже, он дает тот же результат, независимо от того, включен он в код или нет.

1 Ответ

0 голосов
/ 26 марта 2020

Вы можете использовать указанный ниже селектор CSS и ограничить прокрутку только внешним внутренним делителем. 

$("#section-2").bind("mousewheel", function(event) {
  const target = event.target;
  return target.className === 'scroll_sec' ? true : false;
});
#section-2 {
  height: 500px;
}

.scroll_sec {
    width: 50%;
    height: 150px;
    margin: 0 auto;
    overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section-2">
  <div class="scroll_sec">
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  x<br>
  </div>
</div>
...