Scroll或者页面元素距离某个位置的方法（个人理解使用）

最新推荐文章于 2023-03-07 14:32:45 发布
最新推荐文章于 2023-03-07 14:32:45 发布
阅读量372 收藏
点赞数
分类专栏： 前端 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q915730058/article/details/122042443
版权

1.Scroll

ScrollTop:　　（被滚动条卷去的头部高度）

ScrollLeft:　　（被滚动条卷曲的左侧距离）

ScrollWidth　　（内容实际宽度：width+padding+超出盒子的宽度）

ScorllHeight　　（内容实际高度：height+padding+超出盒子的高度）

2.getBoundingClientRect()  元素距离页面可视区域上下左右的距离

getBoundingClientRect().top

getBoundingClientRect().left

getBoundingClientRect().right

getBoundingClientRect().bottom

3.window.innerHeight 浏览器窗口的视口

4.window.scrollTo(x-coord,y-coord )   滚动到什么位置

深夜的我最精神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现页面指定div中滑块滑动距离
chenyidong521的博客
01-17 2954
var btn=sessionStorage.getItem("btn"); if(btn!=null || btn!=undefined){ $('.btn-icon').scrollLeft(btn); } function showPurInfo(id){ sessionStorage.setItem("btn",0); window.location.href
css设置滚动条的位置_视口宽高、位置与滚动高度
weixin_39880895的博客
11-29 6563
在很多场景下我们需要通过JavaScript来获取视口或DOM元素的大小、位置以及滚动高度。最常见的一个效果，导航吸顶的一个效果。那么今天就来学习这方面相关的知识。window 和 document在开始了解视口宽高、位置和滚动高度相关的知识之前，先简单的来了解window和document。在学习新的API之前，我都喜欢在调式工具中将对应的API打印出来。比如：window对象表示一个包含DOM...
获取元素距离页面的距离
博客
01-23 3000
function offset(element){ var pos={left:0, top:0}; var parents=element.offsetParent; pos.left+=element.offsetLeft; pos.top+=element.offsetTop; while(parents && !/html|body/i.test(parent
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
11-20
1、是否滚动到底部 isScrollBottom() { // 是否滚动到了底部 this.box = this.$refs.chatListWrapper var clientHeight = this.box.clientHeight var scrollTop = this.box.scrollTop var scrollHeight = this.box.scrollHeight if (scrollTop + clientHeight == scrollHeight) { this.$store.dispatch('setBottomB
使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画
灰色头像@的博客
03-07 4695
当容器有滚动条时,有时需要点击 或 将页面滚动到指定元素位置比如父元素设置了 ,当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离. 如何设置滚动 scrollTop属性 就是指 “元素中的内容” 超出 “元素上边界” 的那部分的高度。 直接给父元素的scrollTop赋值: 这种方法比较直接, 但是因为是直接设置的dom元素的js属性 而不是css属性, 所以想通过这种方法设置过渡动画是没有效果的(transition: all 1s linear; 无效)补充: 有
如何用css实现当（滚轮滑动到一定位置）时，将【nav导航定位】到图片下方展示
weixin_50450473的博客
08-13 927
初始化效果 鼠标滚动后，变成以下的效果 1.布局2部分，图片和滚动区域 2.在滚动区加上，除去图片的高度和滚动属性 此处减之后的高是 68vh .content_scroll::-webkit-scrollbar{ width: 0; // 隐藏滚动条 } .content_scroll{ overflow-y: scroll; height: 68vh; } 3.给nav导航切换的内容区域（目录/评论）加 滚动区高度减去nav区高度和滚动...
scrollTo滚动到指定位置或指定元素的位置、平滑滚动，以及offsetTop的使用
热门推荐
lingliu0824的博客
03-30 3万+
element.scrollTo首先需要注意的是调用scrollTo方法的是出现滚动的父元素，即高度固定overflo:scroll的那个元素。 1.滚动到的位置确定： const parent = document.querySelector(`.parent`) //scrollTo可以直接传入滚动的X,Y值，也可以传入一个对象 //直接传值 parent.scrollTo(0,100) //传入对象的方式，这种方式可以控制滚动的速度 parent.scrollTo({ top: 100 ,
关于window.scroll系列方法汇总 & 滚动到指定元素位置
锋利的绵羊的博客
08-20 1万+
1.window.scroll() 概述 滚动窗口至文档中的特定位置。 语法 window.scroll(x-coord, y-coord) // 参数表示想要置于左上角的像素点的横纵坐标 2.window.scrollBy() 概述 在窗口中按指定的偏移量滚动文档(相对于当前位置进行偏移) 语法 window.scrollBy(x-coord, y-coord); ...
使用vue.js在页面内组件监听scroll事件的方法
12-29
思路：scroll在哪儿个组件内，就在获取那个dom元素。网上好多思路是 window.addEventListener(scroll, function(){ console.log('scrolling'); }); 这是监听不到的！如果你整个网页可以滑动，或许还可以试试！ ...
使用iframe window的scroll方法控制iframe页面滚动
01-21
方法是使用iframe window的scroll方法： 1、获取iframe的窗口对象 var iwin = document.getElementById(‘iframe1’).contentWindow; 2 、获取iframe的窗口document对象 var doc = iwin.document; 3、调用iframe ...
vue2中引用及使用 better-scroll的方法详解
01-21
使用时有三个要点： 一：html部分 <div class=example ref=divScroll> 内容1 内容2 <li>list1 <li>list2 【注】 1.最外层加ref，让better-scroll通过ref来获取整个div；  2.紧跟一个div，不用加任何...
uniapp 将元素滚动到指定位置的两种方法总结
铁锤妹妹的博客
09-28 3万+
使用 uni.pageScrollTo 方法，属于页面级别滚动。
Element属性 ：获取，设置元素滚动距离，scrollHeight,scrollTop, scrollLeft属性详解
m0_37158404的博客
05-25 3954
Element.scrollTop - Web APIs | MDN Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。 scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。
div设置滚动和监听滚动距离
kilito_01的博客
06-20 1161
div设置滚动和监听距离
scroll 方法 获取滚轴距离顶部高度 滚动
web修理工
10-28 1939
$(window).scroll(function(){ 　　var supportPageOffset = window.pageXOffset !== undefined; // 判断是否支持pageXOffset 　　var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); // 判断渲染模式是不是标准模式 　　var y = supportPageOffset ? window.pageYOffset : isCSS1Com
js：监听页面滚动scroll的距离
彭世瑜的博客
05-03 3285
代码如下 <style> body { height: 200vh; } </style> <body> <script> /** * 监听页面滚动 * */ window.addEventListener('scroll', function () { var scrollTop = window.pageYOffset ||
关于scrollTop的兼容问题
二次猿的博客
11-17 837
1、各浏览器下 scrollTop的差异
scrollTop, scrollLeft 滚动条距离
WDS的博客
04-06 1564
滚动条滚动距离 `document.documentElement.scrollTop // ie, ff document.body.scrollTop; //chrome 兼容处理var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;一个
原生js获取滚动条距离底部距离
Tx_spring的博客
04-14 1万+
距离底部距离 = 可视窗口的高度 - 滚动条距离上面的距离 - 滚动条的高度//取窗口可视范围的高度 function getClientHeight() { var clientHeight = 0; if(document.body.clientHeight &amp;&amp; document.documentElement.clientHeight) { ...
scroll-view滚动到某个元素
最新发布
04-04
可以使用scrollIntoView()方法将滚动视图滚动到某个元素。 例如，假设有一个id为"target"的元素，可以使用以下代码将滚动视图滚动到该元素： ```javascript var targetElement = document.getElementById("target...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值