Javascript - How to make scrollbar only visible when you move your mouse inside respective div

Question

So What I want to do is only show a scrollbar for a div when the mouse pointer moves inside the div. If the mouse stops inside the div, the scrollbar should disappear. If the mouse pointer moves but is outside respective div, the scrollbar should not activate.

The actual code for this website is not written by me. I am just editing and making it aesthetically pleasing. I tried making it so that the scrollbar only appears when the pointer is inside the targeted div, but that was not good enough as I wanted it to disappear when the pointer lingers or stills. I checked on the web and forums but couldn't find a fitting answer. I am not too proficient in js, and that is the reason I am asking here for help.

This Answer (Only show scrollbar when page scrolls in css) does cover a lot of what I want, but I want to get the scrollbar to materialize when pointer moves, not when you scroll the page. Any help is greatly appreciated.

EDIT: After @FZs's comment, I think just adding a timer to hide the scrollbar should work, but any better solutions are most welcome. Also, help with designing the timer is also appreciated.

`when you move your mouse inside respective div` --> this is called `:hover` on CSS. So I think `div:hover {overflow:auto}` — Temani Afif, Dec 22 '18 at 19:27
@TemaniAfif, yes i know that but i also want the case where it disappears when i stop moving the mouse, even if it is still inside div — Spacejet, Dec 22 '18 at 19:30
@FZs, I will try that (and I think warping that in a timer will do ), but then how do I set up the Timer? — Spacejet, Dec 22 '18 at 19:43

Oliver Trampleasure · Accepted Answer · 2018-12-23T00:55:19.590

The code below acts as you have requested, it enables overflow-y: scroll; on the mousemove trigger, and disables it automatically after 3 seconds. I have used setTimeout to begin the countdown, adding each new countdown to an array and clearing it as necessary (so only the most recent is active).

There is some explanation if you run the snippet.

Let me know if you needed something else.

// 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>

This is exactly what I wanted. Thanks a lot for your time! :) — Spacejet, Dec 23 '18 at 20:43

Javascript - How to make scrollbar only visible when you move your mouse inside respective div

1 Answers1