<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    body {

      height: 1000px;

    }

  </style>

</head>

<body>

  <script>

    // e.clientX/e.clientY   鼠标在可视区域中的位置

    //

    // e.pageX/e.pageY       鼠标在页面中的位置 有兼容性问题  从IE9以后才支持

    // pageY = clientY + 页面滚动出去的距离

    document.onclick = function () {

      // // 输出页面滚动出去的距离

      // console.log(document.body.scrollLeft);

      // console.log(document.body.scrollTop);

      // // documentElement  文档的根元素  html标签

      // // console.log(document.documentElement);

      // // 有些浏览器 是使用这两个属性来获取的

      // console.log(document.documentElement.scrollLeft);

      // console.log(document.documentElement.scrollTop);

    }

    // 获取页面滚动距离的浏览器兼容性问题

    // 获取页面滚动出去的距离

    function getScroll() {

      var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

      return {

        scrollLeft: scrollLeft,

        scrollTop: scrollTop

      }

    }

  </script>

</body>

</html>

pageX的兼容性处理1的更多相关文章

  1. pageX的兼容性处理2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javascript中一些常见的兼容性问题

    下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题 说明:IE下,可以使 ...

  3. 在ie与火狐的兼容性

    1.在火狐下  document.getElementById("id").textContent可以获取当前获取id下的内容   而在ie下则为:document.getElem ...

  4. js在IE和FF下的兼容性问题

    本文出自前端档案,以作学习参考之用.自己也补充了一些内容 长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此 ...

  5. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  6. IE 和Firefox的js兼容性总结

    IE 和Firefox的js兼容性总结 12 August 2010 11:39 Thursday by 小屋 标签: 浏览器 方法 属性 IT 写法 一.函数和方法差异 1 . getYear()方 ...

  7. js兼容性记录

    做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了, ...

  8. css兼容性的问题

    https://www.douban.com/note/314793848/ 随意的一个博客ie6的兼容 这个博客比较好 http://blog.csdn.net/chuyuqing/article/ ...

  9. IE和Firefox的Javascript兼容性总结

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...

随机推荐

  1. [开发配置]Linux系统配置开发环境

    deeplin系统配置开发环境 开发系统:deeplin 15.11 开发工具:Clion 2019.2 ; PyCharm 2019 ; Idea 2019;  Android Studio 开源库 ...

  2. MySQL测试题——开发公司人事管理系统，包括 Employee表 和 Department表

    一.需求分析 我们的开发团队,计划开发一款公司人事管理软件,用于帮助中小型企业进行更加高效的人事管理.现在需要对数据库部分进行设计和开发,根据对需求和立项的分析,我们确定该数据库中最核心的两个表为员工 ...

  3. python + web自动化，点击不生效，提示“selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable at point (117, 674)”

    前言: 在做web自动化时,遇到一个缩放了浏览器比例的操作,从100%缩小到80%,再进行点击的时候,弹出报错信息,无法点击 selenium.common.exceptions.ElementCli ...

  4. 关于Vue中根组件与组件树的理解

    在观看了b站的关于Vue3的教学视频后,对Vue的根组件与组件树进行简单的总结下 一.实例化Vue应用 // 此时,app就是一个Vue应用的实例,或者说是一个对象 const app = Vue.c ...

  5. 展示html/javascript/css------Live-Server服务器

    Live-server简介 这是一款带有热加载功能的小型开发服务器.用它来展示你的HTML / JavaScript / CSS,但不能用于部署最终的网站. 官网地址:https://www.npmj ...

  6. day 17 i++优先级大于 *i

    (1).有下列定义语句,int *p[4];以下选项中与此语句等价的是[C] (A).int p[4]; (B).int **P; (C).int *(p[4]); (D).int (*p)[4]; ...

  7. 《剑指offer》面试题07. 重建二叉树

    问题描述 输入某二叉树的前序遍历和中序遍历的结果,请重建该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如,给出 前序遍历 preorder = [3,9,20,15,7] 中序遍 ...

  8. rocketmq实现延迟队列精确到秒级实现方案3-时间轮和秒级文件实现

    时间轮和秒级文件实现原理图 这种方案比较简单实现,通过秒级时间,建立对应的文件夹,只要相同的时间超时的消息,就在同一个目录,通过msgid保证文件不重复,等到了时间后,就扫描对应的文件夹的文件,发送到 ...

  9. Mybatis 学习记录

    1.先放上mybatis官网地址: https://mybatis.org/mybatis-3/zh/index.html 2.mybatis源码和有关包下载地址(GitHub): https://g ...

  10. VictoriaMerics学习笔记（1）：翻译官方广告

    先看看VictoriaMetrics官网网站上是如何作(tree)宣(new)传(bee)的: 官方广告 0.(监控领域)最快解决方案 为高性能而设计 便于安装 支持单机和群集版本 1.更高效的存储空 ...