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!

I updated the question to better describe your problem and included the code... feel free to edit back if something went wrong... — T J, Oct 05 '14 at 05:34

score 0 · Answer 1 · answered Oct 04 '14 at 19:26

0

Get div scrol top and set this

 $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#toTopBtn').fadeIn();
            } else {
                $('#toTopBtn').fadeOut();
            }
        });

answered Oct 04 '14 at 19:26

Harutyun Abgaryan

2,013
1
12
15

score 0 · Accepted Answer · edited May 23 '17 at 12:11

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.

for tomorrow: is it possible that during the scrolling, the other scrollcontrol is still visible, but when scrolling ends only than it fades out? so... in the beggining only scrollcontrol.down is visible but when hover, the other one fades in, and when scroling ends scrollcontrol.down fades out, and vice versa? :) — romullus, Oct 04 '14 at 21:30
Hi TJ! I would like to ask you again something if its ok... Can i also add that the scrolling is made also by the mousewheel? (shall i open a new topic for this?) — romullus, Oct 06 '14 at 08:44

Make an element fade out when scrolling complete and vice versa

2 Answers2