스크롤을 완료 할 때 요소가 페이드 아웃되도록합니다. 그 반대의 경우도 마찬가지입니다.

Question

.scroll의 내용이 overflow:hidden이고 그 내용이 자체보다 큽니다. 나는 자바 스크립트를 사용하여 콘텐츠로 위아래로 스크롤하여 .scrollcontrol.up 및 .scrollcontrol.down을 입력하고 .scroll 요소의 위와 아래에 각각 배치했습니다.

다음

는 지금까지했습니다 코드입니다 :

$(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; 
     } 
    } 
    }); 
}); 

및 스크롤 반대 .scrollcontrol.down이 페이드 아웃 종료 때 나는에, .scrollcontrol.down에 .scrollcontrol.up 페이드를 가져 때 나는 그것을하고 싶습니다.

당신은 당신의 솔루션을 기대이 JSFiddle

에 전체 코드를 찾을 수 있습니다!

Answer 1

당신은 감지 할 수있는 설정이 answer 같은 :

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

그리고 스크롤에 도달 할 때 감지 할 수 있습니다

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

---

그래서 사람들을 사용

는 전체 코드는 다음과 같습니다

$(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

사이드 참고 :

조건이 충족되면 내가 그렇지 않으면하겠습니다, 간격을 삭제 해요 우리가 위/아래에 도달하더라도 마우스가 움직일 때까지 실행.

Answer 2

가져 오기 사업부의 scrol 위로 스크롤이에 언급 한 바와 같이 다음을 사용하여 바닥에 도달하면이

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