取消Chrome记录滚动条位置

遇到一个难题,就是页面有时进入后总是会自动滚动到底部。起先以为是代码问题,查找了整个系统没发现相关操作。后来才后知后觉html5新增window.history.scrollRestoration属性,这是一个实验性质的api,chrome 46以上版本都支持

浏览器自身加了这个设定是好意,但是有些页面用户希望不要记住滚动条位置。经过尝试在代码中加入执行以下代码可以解决问题

if ("scrollRestoration" in history) {
    history.scrollRestoration = "manual";
} else {
    window.onunload = function() {
        window.scrollTo(0, 0);
    };
}

在找到上述方法之前,首先尝试了在window.onload时执行window.scrollTo(0,0)不能解决问题,页面依然会记录滚动条位置并跳转,加入定时器异步执行则会先跳转记录位置 再置顶体验不好。

于是研究window.history.scrollRestoration属性

History:{
    length: 14
    scrollRestoration: "auto"
    state: nul
}

scrollRestoration的默认参数:auto,自定滚动条位置。此外还有一个参数:manual,手动定位滚动条位置

因此我们需要先检测history.scrollRestoration是否支持,是则将history.scrollRestoration 设为 "manual",到此大功告成了。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值