文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

一文搞懂 JavaScript 中 DOM 相关的距离

*/             white-space: nowrap;    /*强制不换行*/         }          <textarea...) textarea.clientLeft = 6(border-left) textarea.scrollLeft = 0(横向滚动条滚动的距离) textarea.offsetLeft = 10...元素position:fixed，则其offsetParent的值为null，此时相对视口定位。 元素非fixed定位，其父元素无位设置定位，则offsetParent均为。...元素非fixed定位，其父元素中有设置定位的，则其中离当前元素最近的父元素为offsetParent。 的offsetParent为null，相对视口定位。...pageX = scrollLeft + clientX （但是IE8不支持） layerX = offsetX + 左border + 左边滚动条滚动的距离 x = 鼠标点击位置距离浏览器可视区域的左边距离

1.7K31

向Zepto学习关于偏移的那些事

title: 向Zepto学习关于偏移的那些事 tags: [zepto源码分析, javascript, zepto, 源码分析] 前言 这篇文章主要想说一下Zepto中与"偏移"相关的一些事，很久很久以前...，我们经常会使用offset、position、scrollTop、scrollLeft等方式去改变元素的位置，他们之间有什么区别，是怎么实现的呢？...返回一个对象含有： top, left, width和height 当给定一个含有left和top属性对象时，使用这些值来对集合中每一个元素进行相对于document的定位。...scrollLeft 获取或设置页面上的滚动元素或者整个窗口向右滚动的滚动距离。 scrollLeft: function (value) { if (!...pageXOffset是scrollX的别名，而其代表的含义是返回文档/页面水平方向滚动的像素值 传进来了value就是设置操作了，支持scrollLeft属性，就直接设置其值即可，反之需要用到scrollTo

1.1K80
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    向Zepto学习关于偏移的那些事

    原文出处：IMWeb社区 未经同意，禁止转载 ---- title: 向Zepto学习关于偏移的那些事 date: 2017-12-10 23:06:15 tags: [zepto源码分析, javascript..., zepto, 源码分析] 前言 这篇文章主要想说一下Zepto中与"偏移"相关的一些事，很久很久以前，我们经常会使用offset、position、scrollTop、scrollLeft等方式去改变元素的位置...返回一个对象含有： top, left, width和height 当给定一个含有left和top属性对象时，使用这些值来对集合中每一个元素进行相对于document的定位。...scrollLeft 获取或设置页面上的滚动元素或者整个窗口向右滚动的滚动距离。 scrollLeft: function (value) { if (!...pageXOffset是scrollX的别名，而其代表的含义是返回文档/页面水平方向滚动的像素值 传进来了value就是设置操作了，支持scrollLeft属性，就直接设置其值即可，反之需要用到scrollTo

    48020

    js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验，总结了 javascript、jQuery 获取窗口、文档、元素的各种值 javascript： 文档：是整个document所有的内容 浏览器当前窗口文档body的宽度： document.body.clientWidth...; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)(其他浏览器)： document.body.scrollLeft; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)(ie浏览器)：...document.documentElement.scrollLeft; 滚动条中内容的高度：boxx.scrollHeight;//利用这个可以使滚动条一直在底部 网页正文部分上： window.screenTop...(即网页被卷上去的高度) ：$(document).scrollTop(); 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)：$(document).scrollLeft(); 获取或设置元素的宽度...鉴于layerY和offsetY的不同，要兼容的使用二者要注意 　　1.触发事件的元素一定要设置定位属性。

    17.5K32

    scrollwidth和clientwidth_vue监听页面滚动

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...,他的值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素....对于不可以滚动的元素,这些值总是0. 4.scrollHeight,scrollWidth: 不管有多少对象在页面上可见,他们得到的是整体. 5.style.left: 定位元素与包含它的矩形左边界的偏移量...offsetLeft:Html元素相对于自己的offsetParent元素的位置 scrollLeft:返回和设置当前横向滚动务的坐标值 <input type=”button” value=”点一下

    2.4K10

    JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

    而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...,他的值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素....对于不可以滚动的元素,这些值总是0. 4.scrollHeight,scrollWidth: 不管有多少对象在页面上可见,他们得到的是整体. 5.style.left: 定位元素与包含它的矩形左边界的偏移量...offsetLeft:Html元素相对于自己的offsetParent元素的位置 scrollLeft:返回和设置当前横向滚动务的坐标值 <input type=”button” value=”点一下

    10K20

    完美解决IE6不支持position:fixed的bug

    parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))} 　　上面代码可以直接使用了...当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。...这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。...解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。...这将让你实现完美的平滑的固定位置元素！ 　　然后我发现background-image无需一张真实的图片，设置成about:blank就行了。

    44510

    JS盒子模型

    JavaScript中的盒子模型通常指的是HTML元素在页面中的表示和排列方式，由浏览器处理和管理。...client开头的clientWidth 元素可视区域的宽度：内容+左右padding-滚动条的宽度clientHeight 元素可视区域的高度：内容+上下padding-滚动条的高度clientTop.../Left 元素的上/左边框的宽度offset 开头的offsetParent 距离元素最近的具有定位的祖宗元素offsetWidth 元素内容 + 左右padding + borderoffsetHeight...scrollLeft 横向滚动条卷去的宽度scrollTop、scrollLeft是13个盒子模型属性中唯二可以修改的属性（其余都是只读的，只有这两个是可改写的），通过修改对应的值，可以控制滚动条的滚动...例如，你可以使用element.style来访问元素的样式属性：javascriptCopy codeconst element = document.getElementById('myElement

    43910

    JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度（转）

    window.screen.width  屏幕可用工作区高度：window.screen.availHeight  屏幕可用工作区宽度：window.screen.availWidth  HTML精确定位...:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。 ...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度...要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要 深入Document内部对body进行检测；在DOM环境下...（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

    18.1K10

    JavaScript 学习总结

    JavaScript 学习总结 第一章 认识JavaScript 1，JavaScript是什么 JavaScript是一种可以用来给网页增加交互性的编程语言。...包括技术 XHTML CSS 使用JavaScript访问DOM XML XMLHttpRequest 4，JavaScript与面向对象 对象、属性和方法组合在一起：点号语法（的） document.getElementById...全局变量：不定义在任何一个函数里，可以在任何地方使用（尽量不要使用全局变量） 什么是闭包 子函数可以使用父函数中的局部变量 实例：隔行变色（aLi相当于数组，aLi.length是表示数组里面有多少元素...+‘px’ ;  //横向滚动处理 oDiv.style.top=oEvent.clientY+ scrollTop +‘px’ ;  //纵向滚动处理 }; 6，键盘事件 对比鼠标事件：onclick...oEvent.cancelBubble=true; 阻止事件冒泡 3、鼠标事件    鼠标点击位置：    oEvent.clientX  鼠标距可视区的左边距    oEvent.clientY  鼠标距可视区的上边距    带滚动条的滚动位置

    1.6K40

    （JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十五）：Event事件对象；移动爱心案例；Bubble事件冒泡；基于冒泡的事件委派处理

    /javaScript高级语法/images/bilibili.png")no-repeat; background-size: contain; position: absolute;/*设置移动一定要设置定位...*/ // var left=event.pageX; // var top=event.pageY; /* 获取滚动条滚动的距离 Chrome认为浏览器的滚动条是...body的，可以通过body.scrollTop来获取 火狐等浏览器认为浏览器的滚动条是HTML的 最新的Chrome浏览器中可以使用document.documentElement.scrollTop...= document.documentElement.scrollLeft || document.body.scrollLeft; // console.log(document.body.scrollTop...:;">列表一 javascript:;">列表二 javascript:;">列表三

    15210

    JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth HTML精确定位...:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下...（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

    10.2K30

    javascript中元素的scrollLeft和scrollTop属性说明

    javascript中元素的scrollLeft和scrollTop属性的参数意义： scrollLeft：是该元素的显示（可见）的内容与该元素实际的内容的距离。...即设置scrollleft就如同你拖动水平滚动条一样。假如你的页面太大，浏览器的宽度不够，就会出现滚动条。一开始scrollLeft的值为0，你就看到了你的页面最左边的内容。...而不显示超过浏览器的那部分，当你向右拖动滚动条时，scrollLeft的值在增大，你就看到了右边因隐藏的东西，而看不到左边隐藏的部分。...他就会从scrollLeft的位置开始显示，而不显示0-scrollLeft的元素内容。即：该元素的显示位置与实际内容的位置的距离变大。。。...实现内容的滚动效果（其中内容可以是任何东西：图片，文字，等等） 1 <!

    1.7K20

    JQuery第三节

    设置或者获取垂直滚动条的位置 //获取页面被卷曲的高度 $(window).scrollTop(); //获取页面被卷曲的宽度 $(window).scrollLeft(); 【案例：仿腾讯固定菜单栏案例...】 【案例：小火箭返航案例】 1.5. offset方法与position方法 offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。...//获取元素距离document的位置,返回值为对象：{left:100, top:100} $(selector).offset(); //获取相对于其最近的有定位的父元素的位置。...$(selector).position(); 2. jQuery事件机制 JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,

    1.1K30

    前端成神之路-WebAPIs05

    1.a标签的超链接 2.F5或者刷新按钮（强制刷新） 3.前进后退按钮 但是 火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里...1.3.元素滚动 scroll 系列 1.3.1. scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 ?...1.3.3.案例：仿淘宝固定右侧侧边栏 原先侧边栏是绝对定位 当页面滚动到一定位置，侧边栏改为固定定位 页面继续滚动，会让 返回顶部显示出来 1.3.4.案例分析: 需要用到页面滚动事件 scroll...scrollTop scrollLeft 4.注意页面滚动的距离通过 window.pageXOffset 获得 1.5. mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发...实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 1.6.2.

    1.8K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券