网页取得 body 捲动后的高度

JavaScript scrollTop 属性可以设置和获取指定元素的设置或返回指定元素内容垂直滚动的像素数。而 scrollLeft 属性设置或返回元素内容水平滚动的像素数。指定符合网页的文件型别宣告 <!DOCTYPE html> 正确取得网页 document.body.scrollTop 滚动元素捲动后的高度,使用判断方式以符合不同之 Chrome, Edge, Firefox, Safari, Opera 浏览器。


JavaScript 网页捲动位置

设定网页滑动到指定位置 Pixels、网页滚动到特定位置,读取当前网页捲动位置。JavaScript scrollTop 属性可以用来取得或设定元素的捲动高度,也就是元素顶端与可见区域顶端的距离。如果想要取得整个 body 的捲动高度,JavaScript 网页捲动侦测可以使用 document.body.scrollTopdocument.documentElement.scrollTop 依据浏览器的不同而有所差异,但目前比较没有问题。可以用来制作网页内容之画面捲动相关的效果,例如回到顶端或是指定的导览位置等。

function getScrollTop(){
  var bodyTop = 0;
  if (typeof window.pageYOffset != "undefined") {
    bodyTop = window.pageYOffset;

  } else if (typeof document.compatMode != "undefined"
             && document.compatMode != "BackCompat") {
    bodyTop = document.documentElement.scrollTop;

  } else if (typeof document.body != "undefined") {
    bodyTop = document.body.scrollTop;
  }
  /* 显示出捲动后的高度值 */
  document.getElementById("jsScrollTop").innerHTML = bodyTop;
}

0




jQuery .scroll()

jQuery .scroll() 事件可用于滚动的元素和浏览器视窗物件 window

只需将函数绑定到指定元素的 scroll 事件,当浏览者滚动指定的元素时则会触发捲动 scroll 事件运行指定的 function 函数。

$(function () {
  $(window).scroll(function () {
    var scrollVal = $(this).scrollTop();
    $("span.qScrollTop").text(scrollVal);
  });
});

0


if(scrollVal > 500){
  /* 如果滚动的物件捲动 > 500 则触发指定的动作。*/
}


相关于 window 物件的属性

使用 window.pageXOffset 代替 window.scrollX。网页捲轴水平方向的捲动位移量
window.pageYOffset 代替 window.scrollY 网页捲轴垂直方向的捲动位移量,以完整当前的兼容性代码。

回传浏览器于 window 视窗在萤幕的座标

window.screenX // 在萤幕的 X 座标
window.screenY // 在萤幕的 Y 座标


JavaScript WheelEvent 滚轮事件

WheelEvent 接口表示由于用户移动滑鼠滚轮或类似输入设备而发生的事件。用来创建 WheelEvent 对象。且接口继承父接口 MouseEvent 滑鼠事件、UIEvent 表示简单的用户界面事件、Event 在 DOM 中出现事件的方法。

WheelEvent.deltaMode 表示单位的值、像素、单位为行、单位为页。
主要取得 WheelEvent.deltaX 滚轮的横向「水平」滚动量。WheelEvent.deltaY 滚轮的「垂直」纵向滚动量。

相关于 WheelEvent 滚轮事件 jquery-mousewheel 滑鼠滚轮插件、滑鼠滚轮,触发的方法。依照滚轮反映的正负内容滚动方向,于多笔资料处理对应的资料列出。




判断浏览器、过期的方法

Quirks mode 或者称为 Compatibility Mode

Quirks mode 或者称为 Compatibility Mode 是浏览器的渲染模式,用于向后兼容不符合标准的网页。Quirks mode 的行为会根据不同的浏览器而有所差异,但通常会模仿旧版浏览器的特性来译解。但也会带来些不可预测的问题和安全风险。因此建议网页开发者避免使用 Quirks mode 并且遵循标准的文档类型和语法规范。document.compatMode = CSS1Compat 标准模式,IE 浏览器开启相容模式。
documentMode 属性返回浏览器渲染文档的模式。IE 使用不同方式渲染页面,基于 !DOCTYPE 或者某些存在的 HTML 元素。当前 documentMode 已经不重要了,随即时间应该就不存在这参数了。