隐藏元素时保留滚动

Question

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

同样，您可以单击"更少"以返回到初始视图。

A. 问题

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

有没有一种 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>

Answer 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>

Answer 2

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