CODEWITHSUNDEEP
jqueryhtmlscrollscrollbar
Bart Burg
Bart Burg

Reputation: 4924

How to display scrollbar only when scrolling (using jQuery)

I'm currently building an quiz application with a navigationbar at the bottom, containing bullets for the number of questions:

Screenshot of scrollbar

I got a scrollbar (horizontal) on the bottom of my page which serves to be a navigationbar. Much like you see it a lot on mobile applications. I don't have or want a scrollbar visible, to scroll I just simply click and drag to a side (or on a tablet tap and drag). This is currently working good.

The problem

What I would like to add as functionallity is a tiny dark blue scrollbar that only pops up if I scroll. I figured it'd be easiest if I use a div in stead of the scrollbar so it's to adjust with css. Now I have the div, scrolling along with the bar, auto adjusted to the length of questions and the current position.

Have you got an idea how I can show the scrollbar whenever the scroll takes place? I'd rather not put it on hover but only on the movement.

I allready tried the following:

$('#wrapper').scroll(function() {
  $('#navScrollbar').toggleClass("hidden");
});

The class hidden obviously contains "visibility : hidden;". This wouldn't work for every scroll movement will toggle the class.

Upvotes: 1

Views: 3961

Answers (2)

Bart Burg
Bart Burg

Reputation: 4924

The question was asked long ago when I didn't have much experience yet. Since the question was asked a long time ago, I'll give the chosen solution as answer:

var scrollbarTimeout;

$('#wrapper').scroll(function() {
    $('#navScrollbar').show();
    clearTimeout(scrollbarTimeout);
    scrollbarTimeout = setTimeout(function()
    {
        // Your function here
        $('#navScrollbar').hide();
    }, 500);
});

What this code does, whenever a scroll events happens: the called function creates (or clears and creates) a timeout that hides the scrollbar after 500 milliseconds.

Upvotes: 1

nanobar
nanobar

Reputation: 66355

Create a ticker function which runs every second or two

var isUserScrolling = false;
var navScrollbar = $('#navScrollbar');

function ToggleScrollbarVisiblity()
{
  if(isUserScrolling == false)
    navScrollbar.stop().fadeOut();

  isUserScrolling = false;
}

setInterval(ToggleScrollbarVisiblity, 1500);

$('#wrapper').scroll(function() {
  if(isUserScrolling == false)
    navScrollbar.stop().fadeIn();

  isUserScrolling = true;
});

What this will hopefully do is:

  • When the user starts scrolling fade in the scrollbar and set a boolean to true

  • Every x seconds set the scrolling to false

  • When x seconds comes back around if it is still false (the user hasn't scrolled for x seconds) then fade out

If you encounter issues with the scrollbar fading out at the wrong moment then it is a timing issue. Then coordinate the timings, try:

var scrollThread = null;
var isUserScrolling = false;
var navScrollbar = $('#navScrollbar');

function ToggleScrollbarVisiblity()
{
  if(isUserScrolling == false) {
    navScrollbar.stop().fadeOut();
    clearInterval(scrollThread);
  }

  isUserScrolling = false;
}

$('#wrapper').scroll(function() {
  if(isUserScrolling == false) {
    navScrollbar.stop().fadeIn();
    scrollThread = setInterval(ToggleScrollbarVisiblity, 1500);
  }

  isUserScrolling = true;
});

Upvotes: 0

Related Questions