scrollTop，scrollLeft为0的原因

最新推荐文章于 2023-12-07 17:49:34 发布
最新推荐文章于 2023-12-07 17:49:34 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Canton_jack/article/details/93750294
版权

 

<!DOCTYPE html>

 IE：

 对于没有doctype声明的页面（上方代码），使用  document.body.scrollTop 或 document.documentElement.scrollTop； 

 对于有doctype声明的页面，则使用 document.documentElement.scrollTop；

Chrome、Firefox： 

 对于没有doctype声明的页面，使用  document.body.scrollTop 来获取 scrollTop高度 ； 

 对于有doctype声明的页面，则使用 document.documentElement.scrollTop； 

Safari: 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ； 


通用封装：

 

function getScroll(){
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
}

 

Canton_jack
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue设置scrollLeft 一直为0的原因
a393007511的博客
11-12 4693
问题描述 <div class="icontent" ref="icontent" > <div class="box" ref="cbox" > <img /> </div> </div> img 是position: absolute;绝对定位 icontent，cbox是 position: rela...
解决scrollLeft、scrollTop为0
小菜张的博客
10-22 1192
最近遇到从外面点之后弹框，显示当前是第几组，并且滚动到当前位置的需求 遇到的问题：第一次获取可以获取的scrollWidth，第二次打开弹框就是0，并且设置scrollLeft也不起作用 解决办法： 延时获取dom元素，【可以把document换成this.$el】 需要nextTick 在这之前我们可以先检查一下 是不是当前dom元素可以滚动，如果输出的值有变化 那么dom元素就没有问题 window.addEventListener('scroll', () => { let matchCo.
用 document.body.scrollTop,document.body.scrollLeft 总是零的原因
11lingxian
10-26 288
如果顶部申明 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"&gt; document.body.scrollTop 要改成 docu...
ie中关于document.body.scrollLeft总是0的原因
逸雨涵梦的专栏
09-24 2557
凡是页面顶部声明为： DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">    的情况下，document.body要改为document.documentElem
document.body.scrollLeft和document.body.scrollTop的值总为0解决方法
weixin_30576859的博客
09-28 93
凡是页面顶部声明为： <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> 的情况下，document.body要改为document.docu...
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
10-24
官方文档的解释有点含糊，其实换个角度就很容易理解了，scrollTop获取的是内部元素超出外部容器的高度。例如：$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度，scrollLeft与此同理
关于scrollLeft,scrollTop的浏览器兼容性测试
09-05
它们首先尝试获取 `element.scrollLeft` 或 `element.scrollTop`，如果值为0，则尝试从 `document.documentElement` 获取。这样，无论浏览器如何实现，都可以得到正确的滚动位置。 在实际应用中，这个封装的 `...
offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示
09-22
在上面的例子中，如果div的内边距为0，`clientWidth`也将是200px，因为内容区域宽度等于设置的宽度；如果有内边距，它会减去这部分内边距的宽度。 `scrollWidth`是指元素的实际内容宽度，即使内容超过了元素的显示...
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
10-28
在JavaScript中，处理页面元素的位置和尺寸时，经常会用到几个关键属性，如`scrollHeight`、`scrollWidth`、`scrollLeft`和`scrollTop`。这些属性在不同的场景下有着各自独特的用途，理解它们之间的差异是进行网页...
javascript取消设置的滚动条默认位置，将滚动条设为scrollLeft(0)后滚动条无法拖动
hongmy94的博客
07-08 1612
背景：用js实现类似excel的的冻结列操作，在点击某列进行冻结操作，效果是该列以及该列之前的所有列必须冻结，但看起来的只在可是范围区域内进行冻结，为了实现这个效果，对滚动条进行了一些处理。在实施冻结的时候记录滚动条滚动的距离，并将滚动条的初始位置设为这个距离 $('div').scrollLeft(oldScrollLeft)滚动条只能在这个距离之后进行滚动 在取消冻结...
scrollLeft,scrollTop等等详解.pdf
02-23
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth;
由scrollLeft想起的周边
zjuwwj的博客
07-30 137
scrollLeft、scrollTop scrollLeft : 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 - scrollLeft 可以是任意整数 - 如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是0 - 如果给scrollLeft 设置的值小于0，那么scrollLeft 的值将变为0。 如果给scrollLeft - 设置的值大于元素内容最...
JavaScript简略梳理（第一次）
young1219的博客
12-25 1003
数据类型 js有六种数据类型，包括五种基本数据类型和一种复杂数据类型 &gt;&gt;基本数据类型：Number、String、Boolean、Undefined、Null Number类型 包含整数和浮点数（浮点数数值必须包含一个小数点并且小数点后面最少跟一个数字）两种值 NaN：非数字类型。特点：涉及到任何关于NaN的操作，都会返回到NaN；NaN不等于自身 String类型 ...
如何在JavaScript中获取屏幕，窗口和网页大小
qq_43327962的博客
12-05 2078
浏览器的各种尺寸是javaScript中比较容易混淆的概念，下面我会在本文中解释这些概念并且通过具体示例告诉大家如何访问它们。 屏幕 屏幕尺寸 屏幕尺寸是屏幕的宽度和高度：显示器或移动屏幕。window.screen是保存屏幕尺寸信息的对象。 screen.width：屏幕的宽。 screen.height：屏幕的高。 可用屏幕尺寸 可用的屏幕大小由活动屏幕的宽度和高度组成，没有操作系统工具栏。 screen.availWidth：可利用的宽，等于屏幕的宽。 screen.availH
一.scrollLeft和scrollTop属性说明
秃头也打码
04-21 4089
注意：这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。 注意：在对这两个参数设置值时，直接用数字就可以了，否者不起作用。 javascript中元素的scrollLeft和scrollTop属性的参数意义： scrollLeft：是该元素的...
页面窗口位置-scrollLeft和scrollTop
个人博客
10-12 4902
页面窗口位置之scrollLeft和scrollTop使用场景适用情况使用场景具体演示查看设置 使用场景 适用情况 这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。 使用场景 当你的子盒子宽度或者高度大于父盒子，且父盒子设置了overflow属性时，就可以使用js操作scrollLeft和scrollTop 这里拿overflow=auto举例 &
关于scrollLeft的赋值问题
fyzhu01的专栏
08-26 8838
scrollTop和scrollLeft属性只有当他内部元素超出父级元素的时候才有效，否则将一直为0，貌似设置了也没用。
秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）
最新发布
weixin_61597234的博客
12-07 3360
1.scrollWidth：返回元素整体的宽度，包括由于 overflow 溢出而在屏幕上不可见的内容。 2.scrollHeight：返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。 3.scrollLeft：被隐藏在内容区域左方的距离。设置该值可以改变元素的滚动位置 4.scrollTop：被隐藏在内容区域上方的像距离。设置该值可以改变元素的滚动位置
什么是scrollLeft和scrollTop？
11-25
scrollLeft和scrollTop是JavaScript中用于获取或设置元素在滚动区域内的水平和垂直滚动位置的属性。 scrollLeft属性返回元素在水平方向滚动条滚动的像素数，而scrollTop属性返回元素在垂直方向滚动条滚动的像素数。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值