Javascript - Как сделать полосу прокрутки видимой только когда вы перемещаете мышь внутри соответствующего div

Question

Итак, я хочу показывать полосу прокрутки для div, только когда указатель мыши перемещается внутри div.Если мышь останавливается внутри div, полоса прокрутки должна исчезнуть.Если указатель мыши перемещается, но находится за пределами соответствующего div, полоса прокрутки не должна активироваться.

Фактический код для этого веб-сайта не написан мной.Я просто редактирую и делаю это эстетично.Я попытался сделать так, чтобы полоса прокрутки появлялась только тогда, когда указатель находится внутри целевого элемента div, но этого было недостаточно, поскольку я хотел, чтобы она исчезла, когда указатель задерживается или останавливается.Я проверил в Интернете и на форумах, но не смог найти подходящий ответ.Я не очень хорошо разбираюсь в js, и именно поэтому я прошу здесь о помощи.

Этот ответ ( Показывать полосу прокрутки, только когда прокрутка страниц в css ) покрывает многое из того, чтоЯ хочу, но я хочу, чтобы полоса прокрутки материализовалась при перемещении указателя, а не при прокрутке страницы.Любая помощь очень ценится.

РЕДАКТИРОВАТЬ: После комментария @ FZs, я думаю, просто добавление таймера, чтобы скрыть полосу прокрутки, должно работать, но любые лучшие решения приветствуются.Кроме того, помощь в разработке таймера также приветствуется.

Answer 1

Код ниже действует так, как вы просили, он включает overflow-y: scroll; для триггера mousemove и отключает его автоматически через 3 секунды.Я использовал setTimeout, чтобы начать обратный отсчет, добавляя каждый новый отсчет в массив и очищая его по мере необходимости (поэтому активен только самый последний).

Если вы запускаете фрагмент, есть некоторые объяснения.

Дайте мне знать, если вам нужно что-то еще.

// Create array for setTimeouts
var timeouts = [];

$(".hover-scroll").mousemove(function() {

  // Add class that enables scroll
  $(this).addClass("show-scroll");

  // Clear all setTimeouts
  for (var i = 0; i < timeouts.length; i++) {
    clearTimeout(timeouts[i]);
  }

  // Start a new setTimeout to disable scoll after 3 seconds
  timeouts.push(setTimeout(hideScroll, 3000));

});


function hideScroll() {

  // Disable scroll in ALL divs with .hover-scroll
  $(".hover-scroll.show-scroll").removeClass("show-scroll");

}

.hover-scroll {
  overflow: hidden;
  height: 50px;
  border: 5px solid red;
  padding: 4px;
}

.show-scroll {
  overflow-y: scroll;
  border-color: green;
}

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

<p><strong>How do you know I work?</strong></p>
<p>If you move your mouse over the div below then you wil be able to scroll. If you wait for 3 seconds then the scroll will no longer work. Remember, if you move your mouse it will re-enable. If the border is red you cannot scroll, when it is green then scroll is enabled.</p>

<div class="hover-scroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque quis nunc in rutrum. Aenean vel ultrices justo. Etiam convallis, nisi id aliquet ultrices, sem magna sagittis arcu, ac mollis purus elit sed enim. Pellentesque semper, massa
    quis porttitor rhoncus, ex ante suscipit urna, non faucibus enim nisi sit amet libero. Etiam tincidunt quam et neque faucibus egestas. Aenean porta ipsum nisi, id pellentesque urna sodales auctor. Nam eleifend, tellus ac vehicula sagittis, justo metus
    laoreet diam, eu efficitur sem purus eget nisi. Nullam id nunc mattis, lobortis sem consectetur, hendrerit purus. Maecenas sem dui, vulputate non leo id, viverra consectetur nisl. Nunc viverra mollis ipsum quis congue. Donec at lobortis mauris. Quisque
    quis malesuada orci. Nulla eu tristique turpis. Maecenas vestibulum, ante eget volutpat egestas, urna quam fringilla felis, sed vestibulum turpis dolor ut magna. Cras sed sem nisl. Nam dignissim faucibus mi, non semper nunc dapibus at.</p>
</div>