Question

如果需要滚动root或parent元素，如何显示按钮，如果不需要滚动root / parent元素，则隐藏按钮？

详情：

如果我们有一个max-height为200px（示例）和overflow-y：auto的元素，如果子元素超过或大于上面的max-height，则该元素可以滚动，如果没有，则不能滚动

现在，如何根据根或父元素滚动显示/隐藏按钮（示例）。

这是我的代码：

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元素属性。

所以要比较那两个是否要知道是否有一些内容需要滚动。

我从这个if / else块中得到了click事件处理程序我必须单独定义，因为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>

如果root / parent元素向上/向下滚动则显示按钮，如果不是

1 个答案: