javascript - 隐藏元素时保留滚动

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

同样，您也可以单击“较少”返回到初始视图。

问题

当我单击“较少”时，“更多”按钮不再位于视口中。我必须向上滚动才能看到项目列表。

单击“减少”后，是否有一种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>

最佳答案

您无法使用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>

关于javascript - 隐藏元素时保留滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45824853/