今天写后台程序，用到一个效果，就是弹出层，背景mask，前景就是类似小窗口的操作层，效果同lightbox，其实有很多的js可以用的，但还是习惯于先自己写，毕竟时间久了不复习的话吗很容易遗忘的。
郁闷的是，弹出的层居中到时居中了，就是不是可是范围内的居中，（因为页面很大，有滚动条），一时半会竟没有处理好，郁闷的，先做记录，有空慢慢处理。
网页(内容)可见区域宽：document.body.clientWidth
网页(内容)可见区域高：document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
分享到：
相关推荐
在Web开发中，理解和掌握offsetHeight, clientHeight, scrollHeight这三个属性是非常重要的，它们用于获取HTML元素的高度信息，但各有其特性和应用场景。下面将详细解释这三个属性的区别及其在不同浏览器中的表现。 ...
本篇文章将详细解读offsetHeight、scrollHeight、clientHeight这三个属性的概念和区别，帮助求职者和前端开发者在面试或实际工作中能更加准确地使用这些属性。 ### offsetHeight和offsetWidth属性 offsetHeight和...
在JavaScript中，`clientHeight`、`offsetHeight`和`scrollHeight`是用于获取HTML元素尺寸的三个关键属性，它们在不同的浏览器环境下可能有不同的解释。理解这些属性的区别对于精确地处理网页布局和滚动行为至关重要...
首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容，包含内边距，但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性，没有定义CSS或者内联布局盒子...
scrollbarThumb.style.height = (clientHeight / scrollHeight) * 100 + '%'; scrollbarThumb.style.top = (scrollTop / (scrollHeight - clientHeight)) * 100 + '%'; } container.addEventListener('scroll',...
本知识点主要围绕"滚动条事件js代码"，关注如何在不同浏览器中实现滚动到底部的事件监听，并涉及到`onscroll`、`scrollTop`、`scrollHeight`和`clientHeight`等关键属性和方法。 首先，`onscroll`事件是HTML元素上...
另外，`document.documentElement.clientHeight`和`document.documentElement.scrollHeight`分别代表可视区域高度和整个文档高度，通过比较这两个值可以判断是否已到达页面底部。 下面是一个简单的滚动条监听的代码...
尺寸相关：offsetHeight、clientHeight、scrollHeight； 偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY； 获取相对视口位置：Element.getBoundingClientRect()； 获取元素的style对象：...
在网页设计中，滚动条是用户与页面交互的重要元素，特别是在长...实践中，还可以结合AJAX、Promise等技术进一步优化加载性能和用户体验。希望这个简化的教程能帮助你入门这个话题，并鼓励你探索更复杂的滚动条实现。
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); } function test(){ if (getScrollTop()+getClientHeight()==getScrollHeight()){ alert("到达底部"); }...
if (scrollTop + clientHeight >= scrollHeight - 1) { // 判断是否接近底部 // 加载更多数据或执行其他操作 } ``` 3. **CSS样式调整**：为了实现无间隙滚动，可能需要调整GridView及其子元素的CSS样式。这包括...
如果元素没有滚动条，`scrollHeight`通常等于`clientHeight`。 4. `borderTopWidth`和`borderBottomWidth` 这两个属性分别提供了元素顶部和底部边框的宽度。当计算元素总高度时，需要将这两个值加到`clientHeight`...
} else if(document.body.scrollHeight > document.body.offsetHeight) { // all but IE Mac scrW = document.body.scrollWidth; scrH = document.body.scrollHeight; } else if(document.body) { /...
在网页设计中，动态滚动效果通常用于提升用户体验，特别是在处理大量数据时，它可以使用户更加流畅地浏览信息。...在实际项目中，需要根据具体需求对代码进行调整，例如处理数据加载、错误处理以及优化性能等。
通过上述方法，我们可以在IE6等旧版浏览器中正确获取 `clientHeight` 等属性的值，从而实现更好的跨浏览器兼容性。尽管IE6已经被市场淘汰，但这种方法仍然适用于其他存在兼容性问题的场景。此外，这种技巧还能够帮助...
在网页开发中，"下拉刷新"是一种常见的用户体验设计，特别是在数据流无限制或内容持续更新的场景下，如社交网络、新闻应用等。这种功能允许用户通过在页面底部滑动来加载更多内容，无需手动点击加载按钮。本文将详细...
if (this.scrollHeight - this.scrollTop === this.clientHeight) { loadMoreData(); } }); ``` `loadMoreData()`函数可以是这样： ```javascript function loadMoreData() { fetch('/api/getMoreData') ....
if (scrollTop + clientHeight >= scrollHeight - 1) { // 到达底部的条件 this.isScrolledToBottom = true; // 设置状态 // 可以在此处触发其他操作，如显示“已阅读”按钮等 } else { this....
### HTML中的`<img>`标签及其属性详解 在HTML（超文本标记语言）中，`<img>`标签用于嵌入图像。此标签是单标签形式，即它不需要闭合标签。`<img>`标签通常拥有多种属性，用以定义图像的各种特性。本文将基于示例...
在前端开发中，经常需要处理与浏览器窗口相关的操作，例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 #### 一、获取滚动条高度 滚动条的高度对于实现...