scrollTop & scrollTo & scrollIntoView html元素滚动的原生方法

最新推荐文章于 2024-05-15 15:34:10 发布
最新推荐文章于 2024-05-15 15:34:10 发布
阅读量443 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17335549/article/details/132319973
版权

Element 的 scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。

有behavior参数，支持平滑顺畅的滚动

Element.scrollTo() - Web API 接口参考 | MDN

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数

不能平滑顺畅的滚动

Element.scrollIntoView()

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

有behavior参数，支持平滑顺畅的滚动

Element.scrollIntoView() - Web API 接口参考 | MDN

我有一棵树
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML DOM scrollTo()方法
anywen5590的博客
06-28 1963
一. 作用 scrollTo()方法可把内容滚动到指定的坐标 二. 语法 scrollTo(x, y) 其中参数x为要在窗口文档显示区左上角显示的文档的x坐标, y为要在窗口文档显示区左上角显示的文档的y坐标 三. 应用 1. 移动到页面底部 driver.execute_script("window.scrollTo(0, document.body.scrollH...
HTML跳转到页面指定位置方法[scrollTo() , scrollIntoView() I40.scrollIntoView()]
Mo___yu的博客
04-01 1247
【代码】HTML跳转到页面指定位置方法[scrollTo() , scrollIntoView() I40.scrollIntoView()]
scrollIntoView和scrollTo方法实现滚动到指定元素的位置
最新发布
this__valve的博客
05-15 442
scrollIntoView和scrollTo
window.scrollTo滚动
Yoyo_Yan的博客
02-09 2815
window.scrollTo()和window.scroll()是同一个方法，参考MDN。 window.scrollTo() 在window对象上实现滚动效果 //可以直接调用 window.scrollTo(0, 1000); //也可以加 window.scrollTo({ top: 100, left: 100, behavior: 'smooth' }); 在具体的元素...
获取元素在文档document的位置
weixin_30384217的博客
05-10 226
<textarea> function getLocation(element) { if(element == null) return null; var offsetTop = element.offsetTop; var offsetLeft = element.offsetLeft; while(element = element.offsetParent) { off...
vue滚动到指定位置
潇蓝诺依的博客
09-14 3067
vue 滚动到指定位置 <div class="box1"> <div v-for="i in 50" :key="'a' + i" :ref="'a' + i">{{ i }}</div> </div> ⚠️ refs 当与v-for使用时，要加[0] 1.Element.scrollIntoView MDN scrollIntoView scroll(pos) { // 不受定位影响 ，但是水平及垂直方向无法自定义数值，只能 "start"
scrollIntoView方法讲解
EmotionComputer
10-20 802
mdn参考链接：Element.scrollIntoView() Element 接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。 TIPS：页面（容器）可滚动时才有用！ var element = document.getElementById("box"); element.scrollIntoView(); element.scrollIntoView(false); element.scrollIntoView({bl
Web自动化——滑动scrollIntoView和Window.scrollTo()
for_further的博客
04-27 5148
一. 什么是scrollIntoView scrollIntoView是一个与页面(容器)滚动相关的API 二. 如何调用 element.scrollIntoView() 参数默认为true 参数为true：调用该函数，页面发送滚动，使element的顶部与视图(容器)顶部对齐 参数为false：使element的底部与视图(容器)底部对齐 三. 使用场景 在python+selenium做元...
原生页面滚动方法——Element.scrollIntoView
who_become_gods的博客
09-01 460
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 语法 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoViewOptions); // Object型参数 参数 alignToTop 可选 是一个Boolean值
ScrollView滚动到底部使用的scrollTo和fullScroll方法的异同
Excing的专栏
10-22 4963
scrollTo和fullScroll两个方法经常被用来做滚动到底部的操作 就这个功能而言 两者有其不同之处
Html5 滚动穿透的方法
11-21
问题背景： 网站需要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案 在H5中使用的列表采用的是 react-virtualized 来绘制表格 为了展示表格中单行数据的具体详情，通常的解决方案是...
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
12-11
`scrollTop` 是一个 jQuery 中非常实用的方法，它允许我们获取或设置元素的垂直滚动位置。这个方法的核心在于通过监听滚动事件来动态调整导航条的显示状态。在本文中，我们将探讨如何利用 `scrollTop` 实现根据滚动...
html中dom元素滚动条滚动控制小结详解
11-20
不知道大家有没有遇到过这样的需求，在某个 dom 元素中添加新的子元素，然后要求如果新添加的新元素超出容器的范围，那么我们需要自动滚动到新添加的子元素的位置，如下图所示效果： 那么接下来我们一边学习一些 ...
jQuery实现点击滚动到指定元素上的方法分析
10-15
在网页交互设计中，用户友好性和易用性是非常重要的因素，而实现页面元素的点击滚动...同时，为了兼容不同的浏览器和设备，开发者还需要考虑使用`window.scrollTo()`等原生方法作为备选方案，以确保功能的广泛适用性。
JS判断页面是否出现滚动条的方法
12-07
这个方法的巧妙之处在于它通过尝试改变滚动值并检查是否发生变化来判断滚动条的存在，而不是直接检查元素的宽度、高度或滚动区域的大小。这样可以避免因为浏览器的差异或用户自定义样式导致的误判。 总结一下，JS...
scrollIntoView()方法的学习
zoepriselife316的博客
08-06 2360
scrollIntoView
scrollTo滚动到指定位置或指定元素的位置、平滑滚动，以及offsetTop的使用
热门推荐
lingliu0824的博客
03-30 4万+
element.scrollTo首先需要注意的是调用scrollTo方法的是出现滚动的父元素，即高度固定overflo:scroll的那个元素。 1.滚动到的位置确定： const parent = document.querySelector(`.parent`) //scrollTo可以直接传入滚动的X,Y值，也可以传入一个对象 //直接传值 parent.scrollTo(0,100) //传入对象的方式，这种方式可以控制滚动的速度 parent.scrollTo({ top: 100 ,
scrollTo和scrollBy方法添加动画
zm1640111308的博客
06-19 3330
scrollBy scrollTo 动画
js scrollIntoView 设置滚动速度
01-04
在JavaScript中，scrollIntoView()方法用于将元素滚动到可见区域。然而，该方法本身并没有提供直接设置滚动速度的选项。但是，你可以通过一些技巧来实现滚动速度的控制。 一种常见的方法是使用CSS的scroll-behavior属性来设置滚动行为。你可以将其设置为"smooth"，这样在滚动时就会有一个平滑的过渡效果。例如： ```javascript element.scrollIntoView({ behavior: 'smooth' }); ``` 这样就会以默认的滚动速度将元素滚动到可见区域。 如果你需要更精确地控制滚动速度，可以使用JavaScript的定时器和scrollTop属性来实现。具体步骤如下： 1. 获取当前滚动位置和目标滚动位置之间的距离。 2. 将总的滚动距离分成多个小步骤。 3. 使用定时器逐步改变scrollTop属性的值，实现平滑滚动效果。 以下是一个示例代码： ```javascript function smoothScroll(element, duration) { const targetPosition = element.offsetTop; const startPosition = window.pageYOffset; const distance = targetPosition - startPosition; const startTime = performance.now(); function scrollStep(timestamp) { const currentTime = timestamp - startTime; const scrollProgress = Math.min(currentTime / duration, 1); const scrollDistance = distance * scrollProgress; window.scrollTo(0, startPosition + scrollDistance); if (currentTime < duration) { requestAnimationFrame(scrollStep); } } requestAnimationFrame(scrollStep); } // 使用示例 const element = document.getElementById('targetElement'); smoothScroll(element, 1000); // 设置滚动速度为1秒滚动到目标元素 ```＊＊＊View()方法将元素滚动到可见区域？ 2. 如何使用CSS控制滚动速度？ 3. 如何使用JavaScript实现平滑滚动效果？

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值