pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

时间：2021-12-19 06:04:21

event.pageX　　get mouse position

　　Description: The mouse position relative to the left edge of the document.

Example

 <script>

     $(document).on( "mousemove", function( event ) {

         console.log( "pageX: " + event.pageX + ", pageY: " + event.pageY );

     });

 </script>

.offset()　　get offset position of an element

　　Description: Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

Example(get)

 <script>

     var p = $(element);

     var offset = p.offset();

     p.html( "left: " + offset.left + ", top: " + offset.top );

 </script>

Example(set)

 <script>

     // the parameter must be PlainObject

     var coord = {top: 50, left: 100};

     $(element).offset(coord);

 </script>

.position()    get the relative Position of an element

　　Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

　　Note: this method does not accept any arguments.

Example

 <script>

     var p = $(element);

     var position = p.position();

     console.log( "left: " + position.left + ", top: " + position.top );

 </script>

.scrollTop()

　　Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

Example(get)

 <script>

     var p = $(element);

     console.log( "scrollTop:" + p.scrollTop() );

 </script>

Example(set)

 <script>

     var topValue = 500;

     $(element).scrollTop(topValue);

 </script>

相关：.scrollLeft()

The difference between screenX/Y, clientX/Y and pageX/Y

  1. pageX/Y     gives the coordinates relative to the <html> element in CSS pixels.
  2. clientX/Y    gives the coordinates relative to the viewport in CSS pixels.
  3. screenX/Y  gives the coordinates relative to the screen in device pixels.

Example

 <script>

     document.addEventListener('click', function(e) {

         console.log(

             'page: ' + e.pageX + ',' + e.pageY,

             'client: ' + e.clientX + ',' + e.clientY,

             'screen: ' + e.screenX + ',' + e.screenY)

     });

 </script>

A picture explaining the difference between pageY and clientY:

pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

jQuery Scroll to bottom of page/iframe

 <script>

     $('html, body').animate({

        scrollTop: $(document).height()-$(window).height()},

        2000

     );

 </script>

Composite example

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>Demo</title>

   </head>

   <body style="height:1000px;">

     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>

     <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>

     <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>

     <div id="D" style="left:700px;"> client     <br /> mouse<br/>position </div>

   </body>

   <style>

   #A,#B,#C,#D {

     width: 100px;

     height: 100px;

     cursor: pointer;

     background: #2f2f2f;

     position: absolute;

     top: 50px;

     color: #fff;

     font: bold 15px Arial;

   }

   </style>

   <script>

       $(document).ready(function (e) {

           // pageX

           $('#A').click(function (e) {

               console.log(e.pageX + ' , ' + e.pageY);

           });

           // offset()

           $('#B').click(function (e) {

               var posX = $(this).offset().left,

                   posY = $(this).offset().top;

               console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));

           });

           // position

           $('#C').click(function (e) {

               var posX = $(this).position().left,

                   posY = $(this).position().top;

               console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));

           });

           // client offset scroll

           $('#D').click(function (e) {

               var offset_t = $(this).offset().top - $(window).scrollTop();

               var offset_l = $(this).offset().left - $(window).scrollLeft();

               var left = Math.round( (e.clientX - offset_l) );

               var top = Math.round( (e.clientY - offset_t) );

               console.log("Left: " + offset_t + " Top: " + offset_l);

       });

   });

   </script>

   </body>

 </html>

pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y的更多相关文章

  1. screenX、clientX、pageX的区别

    screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...

  2. offset&lpar;&rpar; position&lpar;&rpar; scrollTop&lpar;&rpar; scrollLeft&lpar;&rpar;

    (1)offset:获取当前元素相对于文档的高度.只对可见元素有效. 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一 ...

  3. 一句话解释jquery中offset、pageX&comma; pageY、position、scrollTop&comma; scrollLeft的区别

    offset   元素相对文档的偏移 pageX, pageY 事件(鼠标)相对文档的偏移 注意:文档是指document, 而不是当前窗口,是包含了滚动位置的,即滚动条的位置对这些值是不产生影响的 ...

  4. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕，相对浏览器窗口，相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  5. pageX&sol;pageY&comma;screenX&sol;screenY&comma;clientX&sol;clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

  6. 18年春招某编程题：有三个整数X&comma;Y&comma;Z&comma;要求进行若干次操作使得X&comma;Y&comma;Z相等

    题目描述: 给定三个整数X,Y,Z,要求进行若干次操作使得X,Y,Z相等,操作有两种: 1.从X,Y,Z中选择两个数都加1. 2.从X,Y,Z中选择一个数加2. 求最少需要多少次操作. 题目思路: 1 ...

  7. 函数的光滑化或正则化 卷积 应用 两个统计独立变量X与Y的和的概率密度函数是X与Y的概率密度函数的卷积

    http://graphics.stanford.edu/courses/cs178/applets/convolution.html Convolution is an operation on t ...

  8. javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX

    原文:https://www.cnblogs.com/ifworld/p/7605954.html 元素宽高 offsetWidth //返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) o ...

  9. clientX、pageX、offsetX、screenX的区别

    这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...

随机推荐

  1. Struts中Action三种接收参数的方式？

    前言: 前面已经有一篇随笔介绍了Struts2的大概原理.本文就Struts2中Action与jsp页面进行数据对接时介绍几种常见方法! 值栈ValueStack 3个Action Action1 p ...

  2. 常见的特殊字符和HTML之间的对应关系~

    No. 文字表記 10進表記 16進表記 文字   Comment 001 " " " """   quotation mark = APL ...

  3. JqueryMobile动态生成listView并实现刷新的两种方法

    本篇文章主要是对JqueryMobile动态生成listView并实现刷新的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JqueryMobile动态生成listView并实现刷新 ...

  4. 自定义View&lpar;三&rpar;--实现一个简单地流式布局

    Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将 ...

  5. Leetcode&lowbar;198&lowbar;House Robber

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/47680663 You are a professional ...

  6. 论文阅读（Weilin Huang——【ECCV2016】Detecting Text in Natural Image with Connectionist Text Proposal Network）

    Weilin Huang——[ECCV2016]Detecting Text in Natural Image with Connectionist Text Proposal Network 目录 ...

  7. Gson使用技巧

    1. CharMatcher String serviceUrl = CharMatcher.is('/').trimTrailingFrom(ConfigHelper.metaServiceUrl( ...

  8. Statement执行静态SQL语句

    package com.isoftstone.jdbc; import java.sql.Connection; import java.sql.DriverManager; import java. ...

  9. Delphi 解析系统环境变量

    // http://www.outofmemory.cn function ExpandEnvironment(const strValue: string): string; var chrResu ...

  10. Vue中动态添加多个class

    vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单 先看一下示例: ...

相关文章