[前端] scrollIntoView 滚动当前元素，进入浏览器的可见区域

最新推荐文章于 2024-06-18 10:41:36 发布

天空还下着雪

最新推荐文章于 2024-06-18 10:41:36 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签： web前端开发

前端专栏收录该内容

154 篇文章 0 订阅

订阅专栏

scrollIntoView方法滚动当前元素，进入浏览器的可见区域。

el.scrollIntoView(); // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);

该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true。

文章来源：http://javascript.ruanyifeng.com/dom/element.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天空还下着雪

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

js平滑滚动元素进入视图

liuhao9999的博客

06-15

388

js平滑滚动元素进入视图

scrollIntoView多重校验rules滚动到指定位置

AIGC大前端小王子

12-06

317

本文主要通过scrollIntoView解决页面有非空字段为空时提交，未自动定位到非空处。方法将调用它的元素滚动到浏览器窗口的可见区域。二、CASE案例页面逻辑三、参考样式

参与评论您还未登录，请先登录后发表或查看评论

scroll-into-view, 如果可能，将元素滚动到视图中.zip

09-18

scroll-into-view, 如果可能，将元素滚动到视图中什么将元素滚动到视图中同时滚动任何滚动父对象，使该元素处于视图中。捐赠如果你想在财务上显示你的支持，我是在 Patreon示例示例需要它var scrollIntoView = require('scroll-

【前端】scrollIntoView 滑动到指定区域

loyd3的博客

11-16

2189

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。注意：页面（容器）可滚动时才有用！ element.scrollIntoView（）; // 等同于element.scrollIntoView(true) element.scrollIntoView（alignToTop）; //布尔参数 element.scrollIntoView（scrollIntoViewOptions）; //对象参数参数 alignToTop：布尔参数 true：相当于

uni-app scroll-view可视范围判断

pgLi

06-18

232

scroll-view可视范围判断

js scrollIntoView 滚动到元素可视区域

dicha7140的博客

10-24

850

老是忘记这个函数名，记录一下啊 // 滚动到可视区域 document.querySelector(".loading").scrollIntoView() 转载于:https://www.cnblogs.com/CyLee/p/9841891.html

页面元素的定位scrollintoview

lee576的专栏

04-07

7331

在.Net中的应用1、定位指定控件/// /// 定位txtCode控件 /// private void Scroll() {string s="functionwindow.onload(){document.all("+this.txtCode.ClientID+").scrollIntoView();}"; Page.RegisterStartupScript(

使用scrollIntoView方法定位页面元素---小结

yangzai928的专栏

05-13

2383

object.scrollIntoView(boolean); 参数为：true时，当前元素的顶部和当前页面的顶部重合；false时，当前元素底部和当前页面底部重合； object 应为页面中的dom元素；注：该方法貌似juqery不支持(仅供参考) 如果有错误请各位指出来，一起学习谢谢！

关于浏览器（二）浏览器 滚动到顶部；滚动到底部

jieweiwujie的博客

07-15

708

滚动到顶部

平滑滚动到元素

liuhao9999的博客

07-26

224

这篇文章介绍了一个平滑滚动的实现，它还允许我们自定义动画效果和持续时间。我们将在一个流行的用例中演示用户可以通过单击相关的导航按钮在部分之间跳转。如果您还没有看到该功能，请不要担心。顾名思义，该函数会将页面滚动到given。最后，如果还有剩余时间，我们继续循环。目前，我们每毫秒平均移动到目标。我们每毫秒移动相同的距离。帖子中提到的，我们可以通过传递平滑滚动到给定元素。要滚动到给定点，我们可以使用。我们要做的是在给定的持续时间内从起点移动到终点。指示从页面顶部到目标的距离。属性确定的特定元素。...

js：scroll平滑滚动页面或元素到顶部或底部的方案汇总

热门推荐

彭世瑜的博客

07-12

1万+

可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;

使用scrollIntoView和监听滚动区域子div的相对于视口的顶部的距离，来实现导航定位功能

slom_fxt的博客

03-21

3087

使用scrollIntoView和监听滚动区域子div的相对于视口的顶部的距离，来实现导航定位功能

uniapp使用scroll-into-view实现锚点定位和滚动监听功能【楼层效果 / 侧边导航联动效果】

m0_49714202的博客

09-27

2352

uniapp使用scroll-into-view实现锚点定位和滚动监听功能【楼层效果 / 侧边导航联动效果】

scrollIntoView() 让元素进入可视区域

前端队长Daotin

07-12

564

介绍DOM元素的 scrollIntoView()方法是一个IE6浏览器也支持的原生JS API，可以让元素进入视区，通过触发滚动容器的定位实现。语法element.scrollInto...

uniapp中scroll-view组件scroll-into-view的使用

记录本人工作中遇到的问题、经验总结以及分享。

11-01

6991

目的：让 scroll-view组件自动定位到当前月份，比如11月。

uniapp使用scroll-into-view实现锚点定位和滚动监听功能

weixin_47136265的博客

08-15

3712

1、点击左侧分类导航栏页面右侧区域滚动到对应的分类数据，通过scroll-into-view实现，2、滚动右侧区域，滚动到哪一分类的的区域，左侧导航栏对应分类的导航变为选中状态，通过滚动监听实现。

uni-app——scroll-into-view 锚点功能

LinBM123的博客

11-16

1966

注意点： scroll-into-view绑定scroll-view子元素id scroll-view容器高度设置height: 100vh; <template> <view class="container"> <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y left_box" @scrolltoupper="upper" @scrolltolower="lowe.

uni-app和小程序中的scroll-view中的属性scroll-into-view的使用

Beggarya的博客

10-21

2608

uni-app中的scroll-view滚动条属性scroll-into-view使用

uniapp||小程序的scroll-into-view用法。发送信息，信息滚动到最后一条。

ftz123666的博客

06-09

853

总结：scroll-into-view和id对应，不能用数字。二者的内容一样，类似锚点。1-intoIndex是data中的数据，scroll-y 确定好方向。4-发送信息时，让数组(oneselfData)的最后一条数据置底。2-在每一条信息列表中添加一个id(注意不能用数字)，拼接一下。

scrollIntoView 滚动之后卡