滾動完成時使元素淡出，反之亦然

我有一個元素.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

找到完整的代碼，期待着您的解決方案！

來源

2014-10-04 romullus

我更新了問題，以更好地描述您的問題，幷包含代碼...如果出現問題，請隨時編輯... – 2014-10-05 05:34:53

謝謝TJ！ :) – romullus 2014-10-05 10:46:53

當滾動達到使用作爲中提到的以下底部，你可以檢測到這種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

旁註：

我清理的時間間隔，一旦條件滿足，否則它會繼續直到鼠標移出，即使我們達到頂部/底部。

來源

2014-10-04 20:00:18

你是最棒的！:)謝謝！明天的 – romullus 2014-10-04 20:05:29

：是否有可能在滾動期間，其他滾動控件仍然可見，但是當滾動只結束而不是淡出？所以......在開始時只有scrollcontrol.down是可見的，但當懸停時，另一個淡入，當滾動結束scrollcontrol.down淡出，反之亦然？ :) – romullus 2014-10-04 21:30:10

@romullus看到更新... – 2014-10-05 05:17:52

獲取DIV scrol頂部，設置這個

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

來源

2014-10-04 19:26:51

滾動完成時使元素淡出，反之亦然

回答

相關問題