我想为移动菜单创建一个不错的滚动体验,我的想法是在菜单中使用 .fadeIn,并使用 .fadeOut 淡出主站点包装,这样您就可以为移动设备获得更好的 flex 滚动,而无需故障位置:固定/正文在业务下方滚动,即使在 iOS 10 和 Android 上仍在发生。
很明显,当 wrapper 为 display:none 时,body 变成了视口(viewport)的高度,这会将页面跳到顶部,一旦 wrapper 淡入淡出,是否可以返回旧的滚动位置?
在这里 fiddle :https://jsfiddle.net/y1goy3b2/
任何帮助或问题都会很棒!
干杯
<div class="menu" id="open-menu">
<div class="menu-bttn">
</div>
</div>
<div class="mob-menu">
</div>
<div class="site-wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Prodest, inquit, mihi
eo esse animo. Non dolere, inquam, istud quam vim habeat postea videro; Et
ille ridens: Video, inquit, quid agas; Hinc ceteri particulas arripere conati
suam quisque videro voluit afferre sententiam. Inde sermone vario sex illa
</p>
</div>
<script>
$('#open-menu').click(function() {
$('.site-wrapper').fadeToggle('fast');
$('.mob-menu').fadeToggle('fast');
});
</script>
最佳答案
我已经更新了你的 fiddle 。请查看this
var oldScrollposition = 0;
$('#open-menu').click(function() {
if($('.site-wrapper').is(":visible")){
oldScrollposition = $(document).scrollTop();
}
$('.site-wrapper').fadeToggle('fast');
$('.mob-menu').fadeToggle('fast');
$(document).scrollTop(oldScrollposition);
});
关于javascript - 在主体淡出之前存储滚动位置,然后在主体淡入之后返回滚动位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45605528/