scrollIntoView 滚不动

最新推荐文章于 2025-05-14 22:58:09 发布

crowu_n

最新推荐文章于 2025-05-14 22:58:09 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：干货文章标签： js dom操作

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/spider_on_net/article/details/121138408

干货专栏收录该内容

11 篇文章

订阅专栏

本文探讨了el.scrollIntoView()在某些情况下的滚动行为异常问题，并提供了解决方案：通过设置参数behavior:smooth和inline:start来避免元素紧贴窗口边界，确保滚动效果正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el.scrollIntoView()
会将元素滚到窗口可见范围内，包括水平跟垂直

当加上参数 behavior: "smooth" 时，在特殊情况下（现在还没搞懂是什么原因），scrollIntoView 会刚刚好地，将元素右边紧贴着窗口右边界，不多也不少（正常情况下是会多出那么一点的）。
导致后续的滚动执行了但不生效。

解决办法是加上参数 inline: "start"（inline 默认是 “nearest”）。这样可以避免滚动后元素右边紧贴窗口右边界。不会出现滚不动的问题

博客等级

码龄5年

12
原创

3
点赞

4
收藏

0
粉丝

关注

私信

热门文章

分类专栏

干货 11篇

上一篇：: vue 二次封装如何做透传+覆盖

下一篇：: github 提交不了代码

最新评论

scrollIntoView 滚不动
realoneX: TSKR!!!
vue 二次封装如何做透传+覆盖
crowu_n: 发现直接用 v-bind="$attrs" 还有一个问题 [code=javascript] // template <template> <el-tag class="ellipsis-tag" :class="{ 'ellipsis-tag--closable': $attrs.closable }" v-bind="$attrs" v-on="$listeners" > <slot></slot> </el-tag> </template> // 调用处 <WrapTag closable>123</WrapTag> // 问题 $attrs.closable 会为 ""，导致 closable 的 class 加不上。要这样传才没问题 <WrapTag :closable="true">123</WrapTag> [/code]
vue 二次封装如何做透传+覆盖
crowu_n: 没太懂你说的覆盖没实现是什么意思？这里的覆盖指的就是 layout 自控了。$attrs 的话不能自己覆盖 default、validator 等属性，说白了， $attrs 就【只有值】而已，跟 props 还是相去甚远
vue 二次封装如何做透传+覆盖
一只躺猫: 透传是透传了, 但父组件属性覆盖子组件属性还是没实现, 还是得在子组件声明属性再覆盖. 你这样写实际写麻烦了, 直接v-bind="$attrs"就行了

大家在看

最新文章

目录

展开全部

收起

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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