Событие над полосой прокрутки

Question

Какое событие возникает, если курсор мыши попал в область полосы прокрутки?
Не движение полосы прокрутки .scroll, а просто попал в любую ее область?

s.kuznetsov · Answer

Вам это нужно было? В примере использую событие mousemove. Т.е. при малейшем сдвиге курсора по скролл-бару будет срабатывать событие. Вы можете попробовать другие события.

$(document).ready(function() {
  $(document).mousemove(function(event) {
    if(event.target === $('html')[0] && event.clientX >= document.documentElement.offsetWidth)
      console.log('Курсор на скролл-баре');
  })
})

body {
  height: 5000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Это второй способ с контейнерами. Можно использовать несколько контейнеров. Костыльно, конечно, но физически работает.

$(document).ready(function() {
 $(".container_for_element").mouseenter(function(event){
            if($(event.target).is($(this))) {     
            console.log('Курсор НА скролл-баре');
            } 
 });
 
 $(".container_for_element").mouseout(function(event){
            if($(event.target).is($(this))) {     
            console.log('Курсор НЕ на скролл-баре');           
            } else {console.log('Курсор НА скролл-баре');}
 });   
 
});

.container_for_element {
    position: relative;
    width: 200px;
    height: 150px;
    overflow: scroll;
}

.element {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container_for_element">
  <div class="element">
  </div>
</div>
<div class="container_for_element">
  <div class="element">
  </div>
</div>

Событие над полосой прокрутки

One Answer

Add your own answers!

Ask a Question