Question

我有一个.scroll元素overflow:hidden，其内容大于自身。我正在使用javascript来上下滚动内容，方法是将.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.up淡入，当滚动结束时.scrollcontrol.down淡出，反之亦然。

您可以在此JSFiddle

中找到完整代码

期待您的解决方案！

Answer 1

获取div顶部并设置此

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

Answer 2

您可以使用以下answer中提到的内容检测滚动到达底部的时间，如：

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

您可以通过检查.scrollTop()是否为0来检测滚动到达顶部的时间。

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

旁注：

一旦满足条件，我就会清除间隔，否则它会继续执行，直到鼠标移出，即使我们到达顶部/底部。

滚动完成时使元素淡出，反之亦然

2 个答案: