Make an element fade out when scrolling complete and vice versa

Question

I have a an element .scroll with overflow:hidden whose content is larger than itself. I'm using javascript to scroll the content up and down by hovering to links - .scrollcontrol.up and .scrollcontrol.down, placed on top and bottom of the .scroll element respectively.

Following is the code I've so far:

$(function() {
  var ele   = $('#scroll');
  var speed = 25, scroll = 5, scrolling;

  $('.scrollcontrol.up').mouseenter(function() {
    // Scroll the element up
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() - scroll );
    }, speed);
  });

  $('.scrollcontrol.down').mouseenter(function() {
    // Scroll the element down
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() + scroll );
    }, speed);
  });

  $('.scrollcontrol.up, .scrollcontrol.down').bind({
    click: function(e) {
        // Prevent the default click action
        e.preventDefault();
    },
    mouseleave: function() {
        if (scrolling) {
            window.clearInterval(scrolling);
            scrolling = false;
        }
    }
  });
});

and I would like that when I hover on .scrollcontrol.down, .scrollcontrol.up fades in and when the scrolling ends .scrollcontrol.down fades out, and vice versa.

You can find the full code in this JSFiddle

Looking forward for your solutions!

Answer 1

You can detect when the scroll reaches bottom using the following as mentioned in this answer like:

if ($ele.scrollTop() + $ele.innerHeight() >= $ele[0].scrollHeight) {
     // reached bottom
}

And you can detect when scroll reached top by checking whether .scrollTop() is 0.

if (!$ele.scrollTop()) {
    // reached top.
 }

---

So using those, the complete code would be:

$(function () {
 var $ele = $('#scroll'),
     speed = 25,
     scroll = 5,
     scrolling;

 $('#scroll-up').mouseenter(function () {
     // Scroll the element up
     var $this = $(this);
     $("#scroll-down").fadeIn();
     scrolling = setInterval(function () {
       if (!$ele.scrollTop()) {
          $this.fadeOut();
          clearInterval(scrolling);
       } else $ele.scrollTop($ele.scrollTop() - scroll);
     }, speed);
 });

 $('#scroll-down').mouseenter(function () {
     // Scroll the element down
     var $this = $(this);
     $("#scroll-up").fadeIn();
     scrolling = setInterval(function () {
       if ($ele.scrollTop() + $ele.innerHeight() >= $ele[0].scrollHeight) {
          $this.fadeOut();
          clearInterval(scrolling);
       }
       else $ele.scrollTop($ele.scrollTop() + scroll);
     }, speed);
 });

 $('.scrollcontrol.up, .scrollcontrol.down').bind({
     click: function (e) {
       // Prevent the default click action
       e.preventDefault();
     },
     mouseleave: function () {
       if (scrolling) {
             window.clearInterval(scrolling);
       }
     }
 });
});

Updated Fiddle

Side note:

I'm clearing the interval once the condition is met, otherwise it'll keep on executing until the mouse moves out even if we reached top/bottom.