隐藏元素时保留滚动

时间：2017-08-22 18:47:27

标签： javascript html css

我有一个包含元素列表的div。默认情况下，列表仅显示3个元素，您可以通过单击“更多”链接显示更多元素。

同样，您可以点击“减去”返回初始视图。

问题

当我点击“减少”时，“更多”按钮不再出现在视口中。我必须向上滚动才能看到项目列表。

单击“Less”后，是否有css方法在视口中显示项目列表？

请注意，.container必须为position: relative。

$(function() {
  $('.js-more-less').on('click', function (e) {
    $(this).closest('.js-hidden-group').toggleClass('_shown');
    return false;
  });
});
.container {
  position: relative;
}
.js-hidden-group .-item {
  display: none;
}
.js-hidden-group .more {
  display: block;
}
.js-hidden-group .less {
  display: none;
}
.js-hidden-group._shown .-item {
  display: block;
}
.js-hidden-group._shown .more {
  display: none;
}
.js-hidden-group._shown .less {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="js-hidden-group">
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <a href="#" class="js-more-less more">More</a>
    <a href="#" class="js-more-less less">Less</a>
  </div>  
</div>
<br/>
<br/>
<div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
</div>

2 个答案:

答案 0 :(得分：1)

你不能用css做到这一点，但javascript可以真正帮助你：

$(function() {
  $('.js-more-less').on('click', function (e) {
    var height = $(this).closest('.js-hidden-group').height();
    var newScrollTop = $('body').scrollTop() - height;
    $(this).closest('.js-hidden-group').toggleClass('_shown');
    if (!$(this).closest('.js-hidden-group').hasClass('_shown')) {
      $('body').scrollTop(newScrollTop);
    }
    return false;
  });
});
.container {
  position: relative;
}
.js-hidden-group .-item {
  display: none;
}
.js-hidden-group .more {
  display: block;
}
.js-hidden-group .less {
  display: none;
}
.js-hidden-group._shown .-item {
  display: block;
}
.js-hidden-group._shown .more {
  display: none;
}
.js-hidden-group._shown .less {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="-item">Some element</div>
  <div class="js-hidden-group">
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <div class="-item">Some element</div>
    <a href="#" class="js-more-less more">More</a>
    <a href="#" class="js-more-less less">Less</a>
  </div>  
</div>
<br/>
<br/>
<div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
  <div>Some other stuff</div>
</div>

答案 1 :(得分：0)

尝试提供外部div css overflow: scroll并设置固定的height和width样式属性。然后使用jQuery＆＃39; s toggle隐藏/显示内部div。

相关问题
最新问题