scrollIntoView 导致整个页面上移问题

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

更改参数

block: ‘start’, behavior: 'smooth’更改为
behavior: ‘smooth’, block: ‘nearest’, inline: ‘start’

在这里插入图片描述
在这里插入图片描述

不会咋办
关注
Vue3 - 详细实现解析Markdown内容生成侧边栏Toc目录索引，识别文章内容根据大标题/小标题自动生成多级文章目录，点击目录导航时跳转到文章内容对应的锚点位置带过渡动画，滑过锚点时高亮对应标题
王佳斌
08-28 3384
vue3，nuxt3，Markdown，目录，文章目录锚点，滚动高亮导航文字，Vue3渲染markdown文件，并生成锚点目录树(toc)，根据页面滚动高亮显示目录的侧边栏，自动提取标题生成右侧目录，vue3 markdown解析并生成目录，锚点定位，文章目录滚动跟随高亮，右边菜单点击目录滚动到对应标题，报错，渲染失败，文章内容，读取#标题符号，自动生成一个目录树，博客内容生成目录索引，资讯文章，滚动页面的时候文章目录跟着选中效果，侧边栏滚动跟随页面，右边目录固定,左边内容可以滚动并且与左边目录联动，实现监
scrollIntoView()定位元素显示导致页面上移解决方法？
范德萨的博客
07-25 2515
本来想着使用最传统的方法，根据父盒子的高度和子盒子的高度……等，后来发现跟页面布局有关系，使用这种方法会导致跳转不准确，第一次点击可以第二次不行，然后反复尝试。，后续我就想到了它……
scrollIntoView导致页面上移
最新发布
博客简介
05-11 656
vue中使用了scrollIntoView但是点击元素之后虽然能实现定位到指定位置，但是页面整体上移了。
使用scrollIntoView方法解决抛锚定位时网页往上跳的问题
diejiankuai3444的博客
04-14 961
一直都是使用抛锚location.href = "page.htm#anchor";在页面定位位置，但是经常会出现在抛锚定位时页面整体往上跳的问题，每一次都是怀疑页面div+css闹出来的问题，折腾来折腾去依然是无法解决。 在网上查了一下，终于找到一个替代方案，就是使用scrollIntoView方法： 语法： object.scrollIntoView( [bAlignToTop...
ScrollIntoView使用中容器滚动导致整体页面上移解决方法
kareCat的博客
12-30 1280
ScrollIntoView使用
scrollIntoView()方法的学习
zoepriselife316的博客
08-06 2413
scrollIntoView
scrollIntoView导致元素偏移问题
qq_40567519的博客
03-15 2186
scrollIntoView导致元素偏移问题
scrollIntoView()方法导致整个页面产生偏移
前端队长Daotin
01-18 5896
问题描述 今天在做页面UI改版的时候发现，我之前使用的是dom.scrollIntoView(); 使得点击右侧题目编号的时候，让左侧题目滚动到页面可视区域。 如果不知道 scrollIntoView 如果使用，我有篇文章专门写了 scrollIntoView 的简单使用：scrollIntoView() 让元素进入可视区域 · Issue #167 但是现在有个问题就是，当点击题目编号的时候，除了题目会滚动到可视区域，整个页面也会稍稍往上滚动，导致页面错位。 如下图所示，当我点击第9题的时候，左侧第9
h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案
weixin_39528029的博客
10-25 1089
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...
移动端开发兼容性问题
qq_39096319的博客
01-16 831
移动端开发会让你经常会和测试说这样一些话：“我已经测了的，怎么会是这个样子？”；“我的手机上是正常的呀！”；“会不会是缓存~”；“还有这种操作？？？”… 刚开始不如移动端开发，这个时候才发现设备的兼容性是多么让人头疼，下面会记录一些我遇到的问题。这篇文章会持续不定期更新 我讲的不会很细致，只会讲出我遇到的问题和解决的思路及少量代码 ios使用fixed蒙层输入框 你会惊奇的发现，如果你在有...
Web移动端Fixed布局的解决方案
gs981600308的博客
07-31 838
移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。 iOS下的 Fixed + Input BUG现象 让我们先举个栗子，最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局，可能使用如下布局（以下仅...
如何解决使用scrollIntoView()导致页面上移
Alone_Endeavor的博客
05-15 1528
例如document.getElementById('BY').scrollIntoView()可使相应的目标盒子返回其顶部。在项目中，我们如果实现让指定盒子回到document顶部，可以使用scrollIntoView()方法，使用position:fixed;相对浏览器定位并且top:0;该方法解决了父元素位置偏差，直接相对于浏览器进行定位；使用该方法时，会让其最外层的盒子向上偏移；目前本人在开发过程中就遇到了类似问题；该方法虽然好用，但也有相应的弊端；目前只对谷歌和火狐浏览器兼容；
解决iframe内使用scrollIntoView导致外部父元素也滚动的问题
qq_40567849的博客
04-06 1769
解决iframe内使用导致外部父元素也滚动的问题。
打造无缝滚动体验：JavaScript中的scrollIntoView()方法实战指南
编码行者的博客
03-01 1656
通过本文的指南和实例，你将能够充分理解如何运用方法，从而提升用户在你的网页上的滚动体验。不仅如此，这些实战示例也能帮助你更好地应用这一特性到你的项目中，创造出令人难忘的用户交互效果。让我们一起深入JavaScript的滚动世界，打造出无与伦比的网页体验吧！
vue下使用scrollIntoView()进行锚点跳转导致整个页面产生偏移的问题及解决办法
qq_41973957的博客
05-10 6148
vue下使用scrollIntoView()进行锚点跳转页面偏移问题及解决方案
scrollIntoView，scrollTop，offsetTop 实现快速目录和锚点的互相定位功能
a736755244的博客
12-04 2520
scrollIntoView，scrollTop，offsetTop 实现快速目录和锚点的互相定位功能
javascript-ScrollIntoView（）导致整个页面滚动条发生变化
阿龙的博客
01-13 3105
element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }) 二、另一个滚动方案 您可以使用scrollTop代替scrollIntoView()： var target = document.getElementById("target"); target.parentNode.scrollTop = target.offsetTop; 如果要滚动的滚动元素不止一个，则需要根据中间元素..
vue 中 scrollIntoView
weixin_45972345的博客
04-22 4735
vue 中使用 scrollIntoView <div class="item_type" :id="item.id"> <span >{{item.label}}</span> </div> document.getElementById(item.id).scrollIntoView() scrollIntoView({ behavior：auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 block
vue中使用scrollIntoView()让选中的下拉列表项定位在视野中
qq_32755875的博客
07-10 1417
问题出现 需求需要实现一个单选下拉列表，选项在一屏显示不完，做了滚动条overflow:auto, 设置了height高度。 那就出现了一个问题，当我点击某一个item选项时，如果这个item选项不在第一屏，而在滚动后才能看到的区域，那么再次点开这个下拉菜单时无法重新定位到被选中的item所在的这一屏，所以我们需要让下拉单选菜单再次打开时自己定位到这一屏。 查阅资料 问了一下同组的有经验的姐姐，说我可以使用window.scroll这些方法，详见 https://developer.mozilla.org/
scrollIntoView 导致页面网上移动
07-11
如果 scrollIntoView 导致页面上移，可能是因为目标元素位于页面顶部或者视口上方，而调用 scrollIntoView 方法后，浏览器会尝试将目标元素滚动到视口顶部，导致页面上移。 要解决这个问题，可以考虑使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值