Dom的位置、滚动等

最新推荐文章于 2022-09-22 17:10:49 发布
最新推荐文章于 2022-09-22 17:10:49 发布
阅读量113 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limingxiaojie/article/details/113987988
版权

 

clientWidth/clientHeight： width+ padding

clientLeft/clientTop： 表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。(取决于边框的像数值？)

clientX/clientY： 点击位置距离当前body可视区域的x，y坐标

 

offsetWidth/offsetHeight：实际获取的是盒模型(width+border + padding)

offsetLeft/offsetTop：  相对于最近的祖先定位元素，offsetTop = top + marginTop

offsetX/offsetY：相对于带有定位的父盒子的x，y坐标

 

滚动

scrollWidth/scrollHeight： 包括撑起来（或隐藏）的真实高度

scrollTop/scrollLeft： 元素滚动的距离大小

 

两个方法

getComputedStyle

getBoundingClientRect()

 

 

 

 

limingxiaojie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
dom元素滚动条滚动控制详解
神的孩子的博客
05-25 2243
前言 不知道大家有没有遇到过这样的需求，在某个dom元素中添加新的子元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要自动滚动到新添加的子元素的位置，如下图所示效果： 那么接下来我们一边学习一些dom元素滚动相关的知识点，一边实现一个上图的效果和一些其他滚动相关的功能。 需要了解的dom属性和方法 scrollTop、clientHeight和scrollHeight scrollTop属性是一个描述容器元素内容的top值与容器元素(viewport)视口顶部top值之间的差值，即容器中内容向上
html中dom元素滚动条滚动控制小结详解
11-20
不知道大家有没有遇到过这样的需求，在某个 dom 元素中添加新的子元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要自动滚动到新添加的子元素的位置，如下图所示效果： 那么接下来我们一边学习一些 dom 元素滚动相关的知识点，一边实现一个上图的效果和一些其他滚动相关的功能。 需要了解的dom属性和方法 scrollTop、clientHeight和scrollHeight scrollTop 属性是一个描述容器元素内容的top值与容器元素( viewport )视口顶部 top 值之间的差值，即容器中内容向上滑动后超出容器视口的部分。可以通过修改此属性控制滚动状态。 clientH
JavaScript DOM元素尺寸和位置
12-10
一 获取元素的CSS大小  1.通过style内联获取元素的大小   代码如下:      var box = document.getElementById(‘box’);    // 获得元素;      box.style.width;                             // 200px;      box.style.height;                            // 200px; // PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空; 2.通过计算获取元素的大小 代码如下:  
JS实现利用闭包判断Dom元素和滚动条的方向示例
10-16
主要介绍了JS实现利用闭包判断Dom元素和滚动条的方向,涉及javascript闭包、事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
elementUI滚动条,点击dom元素滚动到指定位置.pdf
12-16
elementUI滚动条,点击dom元素滚动到指定位置
DOM滚动
weixin_50053454的博客
03-01 509
1.监听页面滚动事件 window.onscroll = function() {} window.onscroll = function(){ // 打印网页的滚动位置/坐标, 要用html调用 console.log(html.scrollTop, html.scrollLeft) // 需求: 如何判断网页滚动到底? 课堂练习 // 网页滚动距离 + 显示窗口高度 == 网页总高
DOM——文件对象模型（缓动动画、让窗口滚动到指定位置、页面滚动的距离、窗口的可视区域尺寸、元素的几何尺寸、表单操作、媒体和图形编程）
qq_52301431的博客
07-21 329
left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标​返回的对象里边还有属性x,y，表示的是元素左顶点相对于页面body左顶点的距离​height和width属性老版本IE并未实现。window.pageXOffset/window.pageYOffset//bom操作，IE8及IE8以下不兼容document.body.scrollLeft/scrollTop。//可区分标准模式与否。//标准模式下(......
DOM之获取滚动条位置
PassionNeverCuts的博客
09-15 3298
在DOM中可以通过两种方式获取滚动条的位置，通过pageXOffset,pageYOffset,或者scrollLeft，scrollTop function getScrollOffsets(w) { //指定窗口，如果不指定则默认当前窗口 w = w || window; //除了IE8 及更早的版本以外，其他浏览器都
页面滚动到某个DOM元素的位置
公z号：职场爱学习
06-21 1496
搞了一天，才实现这个功能。vue项目，与jsp页面，代码的写法是不同的。 <el-row style="margin-top: 20px;"> <button class="linkWayBtn" @click="toTop"> <el-image src="/static/img/public/to_top.png"></el-image> <div class="linkWayContent"
DOM元素位置，滚动位置和鼠标事件位置相关属性函数总结
weixin_34238642的博客
11-11 182
前言：前段时间经常被这些参数搞混，在此总结一下，画了一张图，希望能对大家有所帮助 getBoundingClientRect相关 left 元素的左边 距离 可视窗口左边的距离 right 元素的右边 距离 可视窗口左边的距离 top 元素的上边 距离 可视窗口顶部的距离 bottom 元素的下边 距离 可视窗口顶部的距离 width...
怎么获取某一个dom元素滚动到底部
i_kun的博客
07-27 1025
该元素的scrollHeight约等于scrollTop和clientHeight。这个1应该是边框误差导致的。所以就用了（b+c>=a-1）来判断改容器的滚动条滚动到了底部
react页面滚动到顶部-＞1.元素dom内部；2.windows滚动
qq_52685664的博客
09-22 702
通过useRef获取元素信息，距离顶部的高度。
页面滚动到dom的位置
weixin_45553145的博客
01-13 210
scrollIntoViewOptions 可选 一个包含下列属性的对象： behavior 可选 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。 block 可选 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。 inline 可选 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 示例
scrollIntoView 让元素滚动到视口 顶部 底部 中间
qq_27315289的博客
05-08 6207
element的接口 partial interface Element { DOMRectList getClientRects(); [NewObject] DOMRect getBoundingClientRect(); void scrollIntoView(optional (boolean or ScrollIntoViewOptions) arg); vo...
js 获取dom的高度和宽度，可滚动宽高距离，当前滚动位置
PrimaryColor
02-22 5745
dom节点属性： clientWidth（不推荐）：dom节点可视区域的宽度。（可滚动距离不算在内哈。） clientHeight（不推荐）：dom节点可视区域的高度。（可滚动距离不算在内哈。） offsetWidth：dom节点可视区域的宽度，包含边框、内边距。（可滚动距离不算在内哈。） offsetHeight：dom节点可视区域的宽度，包含边框、内边距。（可滚动距离不算在内哈。） scrollWidth：dom节点的内容可滚动距离，横向滚动距离。（注意：overflow:hidden时也能获
html dom 设置滚动条卷动位置
weixin_34416649的博客
05-03 608
1.作用对象 有 #outer>#inner #inner有实际的宽度 则在#outer有机会产生滚动条 所以设置.scrollleft应该作用到#outer上. 2.参数单位为空 $('#outer').scrollLeft="100"; 不用带px; 顺便附带random():Math.random(); //获得0~1之...
页面滚动到指定位置的方法
热门推荐
anderlaw的博客
08-02 1万+
视口中可显示的信息是有限的，因此我们常需要页面滚动实现内容显示的切换,介绍几种实现方式： 纯html实现（锚点） 跳转按钮：<a href="#anchorName">点击跳转当前页面指定锚点</a> 设置锚点：<a name="anchorName">a标签锚点</a>、<p id="anchorName">id锚点</p&gt...
vue3 滚动到dom指定位置
最新发布
06-03
你可以使用 `ref` 来获取需要滚动到的 DOM 元素，然后使用 `scrollIntoView()` 方法来滚动到该元素的位置。下面是一个示例代码： ```html 需要滚动到这里的元素 滚动到元素位置 import { ref } from 'vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值