1024快乐!浅谈scrollTop需要踩的坑

news/2024/7/19 13:24:00 标签: js, scroll, scrollTop, scrollTo

开始之前,需要分清楚scrollToscrollTop

坑one

scrollTop_4">1.设置浏览器scrollTop

最好通过用户操作设置滚动,或者setTimeout延时滚动

js">// Chrome和Safari用法一样
window.scrollTo(x, y)

可查看MDN说明。

scrollTop_14">2.设置元素scrollTop
js">// Chrome和Safari下效果一样
// 条件:刷新页面
// 效果:元素y轴滚动100
<script>
    let obox = document.getElementById("box");
    obox.scrollTo(0, 100); 
</script>

坑two

scrollTop_27">1.获取浏览器scrollTop值
js">// Chrome下
// 条件1:页面首次刷新或者页面刷新前滚动条在最顶部
// 效果1:输出0

// 条件2:假如页面刷新前滚动条在500处
// 效果2:刷新后输出500
<script>
	var scroll_top = document.documentElement.scrollTop;
	// 在Chrome下document.body.scrollTop一直为0
	console.log(scroll_top);
</script>
js">// Safari下
// 条件1:页面首次刷新或者页面刷新前滚动条在最顶部
// 效果1:输出0

// 条件2:假如页面刷新前滚动条在500处
// 效果2:刷新后输出500
<script>
	var scroll_top = document.body.scrollTop;
	// 在Safari下document.documentElement.scrollTop一直为0
	console.log(scroll_top);
</script>

这里Chrome和Safari获取元素到滚动条的高度主要区别在于:
document.documentElement.scrollTop还是document.body.scrollTop

scrollTop_61">2.获取元素scrollTop值

js">// Chrome和Safari下效果一样
// 条件:刷新页面
// 效果:元素y轴滚动100,输出100
 <script>
    window.onload = function () {
      let obox = document.getElementById("box");
      obox.scrollTo(0, 100);
      console.log(obox.scrollTop);// result: 100
    }  
  </script>

总结

获取scrollTop兼容写法:

js">function getScrollTop() {
    var scroll_top = 0;
    if (document.documentElement && document.documentElement.scrollTop) { //先获取chrome
        scroll_top = document.documentElement.scrollTop;
    } else if (document.body) {
        scroll_top = document.body.scrollTop;
    }
    return scroll_top;
}

这样写不适用于刷新后获取,除非通过UA区分是什么浏览器。


http://www.niftyadmin.cn/n/1581247.html

相关文章

Flickr看不到照片了

晕倒&#xff0c;看不到照片了&#xff0c;听说是GFW搞的&#xff0c;不知道什么时候弄好。要不要人家看照片啊&#xff01;

如何写出高效的 Vue 代码

开讲之前我先简单的自我介绍一下&#xff0c;本人自喻&#xff1a;flitrue&#xff0c;工作三年有余&#xff0c;在一家不知名的互联网企业担任前端架构师之职。 技术选型问题 近几年前端发展快速&#xff0c;很多同学抱怨学不动了&#xff0c;要回家喂猪。面对前端技术海量的…

最佳的75个网络安全工具 (转载)

工具&#xff1a;Nessus&#xff08;最好的开放源代码风险评估工具&#xff09; 网址&#xff1a;http://www.nessus.org/ 类别&#xff1a;开放源码 平台&#xff1a;Linux/BSD/Unix 简介&#xff1a;Nessus是一款可以运行在Linux、BSD、Solaris以及其他一些系统上的远程安全扫…

深入了解Object.freeze()和Object.seal()

目录Object.freeze()Object.seal()对比Object.freeze()和Object.seal()拓展Object.preventExtensions()Object.freeze() 官方MDN对Object.freeze()的说明&#xff0c;如下&#xff1a; Object.freeze()方法可以冻结一个对象。一个被冻结的对象再也不能被修改&#xff1b;冻结了…

英文总经理室财务部生产部业务部品管部卫生间

GM Office (General Manager Office) Finance Department (Department of Finance) Product Department (Department of Product) Business Department (Department of Business) Production Control Department (Department of Production Control) Rest Room 如果觉得TOILET感…

gulp和webpack的区别

基本区别&#xff1a; gulp可以进行js&#xff0c;htm&#xff0c;css&#xff0c;img的压缩打包&#xff0c;是自动化构建工具&#xff0c;可以将多个js文件或是css压缩成一个文件&#xff0c;并且可以压缩为一行&#xff0c;以此来减少文件体积&#xff0c;加快请求速度和减…

庆祝香港回归10周年

庆祝香港回归10周年 转载于:https://www.cnblogs.com/xA51121/archive/2007/07/01/801752.html

nodejs中的EventLoop

┌───────────────────────┐ ┌─>│ timers │<————— 执行 setTimeout()、setInterval() 的回调 │ └──────────┬────────────┘ | |<-- 执行所有 Next Tick Queue 以及 MicroTas…