Js基础16:偏移量offset、滚动scroll、区c客户lient

JavaScript017

Js基础16:偏移量offset、滚动scroll、区c客户lient,第1张

1、偏移量offset

offset是偏移、位移、补偿的意思(取整数值四舍五入),表示元素的偏移量。

html和css代码

JavaScript代码

2、滚动scroll

scroll是长卷纸,卷轴的意思,表示浏览器滚动时元素的卷曲值。

html和css代码

JavaScript代码

3、客户区client

client获取的是元素的可视区域

案例:吸顶导航

html和css代码

JavaScript代码

问题原理:百度地图的缩放是基于body层的,如果body层有滚动条,并且不在最顶端,在当前位置插入了百度地图,也就是出现该问题时的状态,这个时候滚轮缩放就会产生偏移。

解决办法:当地图加载的时候执行

$(window).scrollTop(0)

也就是将父元素滚动到页面最顶端

最近做项目,由于zepto使用的功能较少,想将zepto的功能用较少原生实现,其中有个实现zepto的offset()方法取到各种值的难为了我,我百度了下,大体网上千篇一律的这样写到

我本着试试看的态度将这个方法炒了上去,打印出值结果与我需要的值相差甚远,为此我仔细翻了下源码,源码见下面链接

源码

找到如下方法getBoundingClientRect,翻了下caniuse发现兼容性还好(本人移动端),故可以写成以下方式

如果要考虑兼容性,请仔细看zepto源码

另外上述

改成

也可以实现