浏览器窗口滚动到一定距离，显示div中的内容，使用jquery

我给我你解释一下吧

你右上角是浏览器

右上角显示的是你body的宽度（这个宽度是不包括滚动条的）

你

$(window)width()

获取的是浏览器的宽度

（这个宽度包括滚动条）

正常情况下这两个宽度相差12像素，也就是一个滚动条的

宽度

1、鼠标事件

clientX 设置或获取鼠标指针位置相对于浏览器内容窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于浏览器内容窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

(跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动，也就是说，他计算left或top时直接忽略了滚动条的高和宽，它的参考点是浏览器可见区域的左上角，而不是页面本身的body左上角原点，计算数值和滚动条是否滚动没有关系，只是绝对的计算鼠标点距离浏览器内容区域的左上角的距离，忽略了滚动条的存在)

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

pageX：参照点是页面本身左上角的原点已经把滚动条滚过的高或宽计算在内

所以基本可以得出结论：

pageX > clientX, pageY > clientY

pageX = clientX + ScrollLeft(滚动条滚过的水平距离)

pageY = clientY + ScrollTop(滚动条滚过的垂直距离)

2、网页

网页可见区域宽： documentbodyclientWidth;

clientLeft: 获取对象的border宽度

clientTop：获取对象的border高度

网页可见区域高： documentbodyclientHeight;

包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时：scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页正文部分上： windowscreenTop;

网页正文部分左： windowscreenLeft;{screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标}

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。

3、屏幕

屏幕分辨率的高： windowscreenheight;

屏幕分辨率的宽： windowscreenwidth;

获取用户电脑屏幕的高度，是不关浏览器或者顶部工具栏跟底部工具栏的高度的

屏幕可用工作区高度： windowscreenavailHeight;

屏幕可用工作区宽度：windowscreenavailWidth;

电脑屏幕减掉顶部工具栏跟底部工具栏的高度

以上就是关于浏览器窗口滚动到一定距离，显示div中的内容，使用jquery全部的内容，包括:浏览器窗口滚动到一定距离，显示div中的内容，使用jquery、pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！