顯示按鈕根/父元素向上/向下滾動，並隱藏按鈕，如果不是

Question

如何顯示一個按鈕，如果根或父元素需要滾動和隱藏按鈕，如果不需要滾動根/父元素？

詳情：

• 如果我們有最大高度200像素（實施例）和溢出-Y的一種元素：汽車，該元素將可如果兒童超過或低於最大高度大於上述滾動，如果不是，則不能滾動。

現在，如何根據根元素或父元素滾動顯示/隱藏按鈕（示例）。

這裏是我的代碼：

var contentStatusProfile = $(".main_profile"); 
var scrollingStatus = $(".scroll-down-status-profile"); 
if (????) { /* Here is my qestion about showing and hiding button corresponding parent element need to be scrolled or not */ 
    scrollingStatus.on('click',function(){ 
     if ($(this).hasClass('more-up-status-profile')) { 
      var lengthScroll = contentStatusProfile[0].scrollTop; 
      lengthScroll -= 150; 
      contentStatusProfile.animate({ 
       scrollTop:lengthScroll 
      }, 500); 
     } 
     else { 
      var lengthScroll = contentStatusProfile[0].scrollTop; 
      lengthScroll += 150; 
      contentStatusProfile.animate({ 
       scrollTop:lengthScroll 
      }, 500); 
      if(lengthScroll >= contentStatusProfile[0].scrollHeight - contentStatusProfile.height()){ 
       scrollingStatus.addClass('more-up-status-profile').children().addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down'); 
      } 
     } 
    }); 
} 

任何一個優秀的答案可以理解的。謝謝。

Answer 1

你要比較的.main_profile兩個不同hieghts。

jQuery的.outerHeight()其中包括填充。
和JavaScript .scrollHeight。

您注意到第一個是()而不是第二個...
這是因爲第一個是jQuery方法，第二個是JavaScript元素屬性。

所以這兩個是那些比較知道是否有一些內容進行滾動。

我得到了click事件處理了這一點，如果/ else塊的。
我必須單獨定義，因爲這個if/else只用於顯示/隱藏按鈕。

我也改了一下你添加和刪除more-up-status-profile類的方式。當它已經上課時，我將它變成了紅色......
在調試時，請不要猶豫，將一些醜陋的明顯顏色！ ;）

var contentStatusProfile = $(".main_profile"); 
 
var scrollingStatus = $(".scroll-down-status-profile"); 
 

 
var csp_height = contentStatusProfile.outerHeight(); 
 
var csp_scrollableHeight = contentStatusProfile[0].scrollHeight; 
 

 
console.log(csp_height); 
 
console.log(csp_scrollableHeight); 
 
console.log(csp_scrollableHeight > csp_height); 
 

 
if (csp_scrollableHeight > csp_height) { /* Here is my qestion about showing and hiding button corresponding parent element need to be scrolled or not */ 
 
    $(".scroll-down-status-profile").show(); 
 
}else{ 
 
    $(".scroll-down-status-profile").hide(); 
 
} 
 

 
scrollingStatus.on('click',function(){ 
 
    var lengthScroll = contentStatusProfile[0].scrollTop; 
 

 
    if ($(this).hasClass('more-up-status-profile')) { 
 

 
    lengthScroll -= 150; 
 
    contentStatusProfile.animate({ 
 
     scrollTop:lengthScroll 
 
    }, 500); 
 
    
 
    if(lengthScroll <= 0){ 
 
     scrollingStatus.removeClass('more-up-status-profile').children().addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up'); 
 
    } 
 
    } 
 
    else { 
 

 
    lengthScroll += 150; 
 
    contentStatusProfile.animate({ 
 
     scrollTop:lengthScroll 
 
    }, 500); 
 

 
    if(lengthScroll >= contentStatusProfile[0].scrollHeight - contentStatusProfile.outerHeight()){ 
 
     scrollingStatus.addClass('more-up-status-profile').children().addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down'); 
 
    }else{ 
 
     scrollingStatus.removeClass('more-up-status-profile').children().addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up'); 
 
    } 
 
    } 
 
});

.main_profile{ 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    overflow-y: auto; 
 
} 
 

 
.more-up-status-profile{ 
 
    background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="main_profile" style="max-height:100px; padding:20px"> 
 
    <div id="test"> 
 
    <ul> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
     <li>lorem ipsum</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<button class="scroll-down-status-profile">Scroll <span class="glyphicon glyphicon-chevron-down"></span></button>