Google Chrome 追加数据后 滚动条一直在原位置不动问题

最新推荐文章于 2022-08-17 13:55:55 发布
最新推荐文章于 2022-08-17 13:55:55 发布
阅读量589 收藏
点赞数 1
分类专栏： css样式 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42446516/article/details/109468250
版权

最近项目中发现一个问题，在一个商品列表底部有一个更多按钮，需要点击这个按钮来加载更多的数据, 但是发现点击更多按钮，加载完新的数据后, 滚动条还是在之前的位置，想要查看加载后的内容，还要往上滚动去找加载前的位置, 用户体验会不好的

解决方法：
在滚动条的容器上添加样式:
加载html或者body中都可以

overflow-anchor: none

至于还有没有别的方法，还不知道，如果有其他方法，欢迎留言，谢谢～

萌二è招财猫！
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
网页刷新或者重新加载后滚动条的位置不变
燕儿归的专栏
12-16 1万+
在开发的过程中我们经常需要重新加载或者刷新某个画面，已确保数据显示是最新的。但是如果一丁点改变就刷新画面的话，会导致用户体验很差，想想看你好不容易把网页拖到最后，结果点击某个按钮的时候，又跑到顶端；或者网页内容很多，你在网页的某个区域进行操作，操作完毕后却回到顶端，再次操作的时候还得找到那个区域。       有两种方法可以解决这个问题：ajax部分刷新或者刷新后滚动条位置不变。这里我们
谷歌浏览器中，点击超链接，页面自动回到顶端，并且不能滚动到下方
zhangfeng2124的专栏
01-13 1601
开始的超链接是这样的：链接 点击之后，页面就自动回到顶端了，并且不能下拉了。 改成这样就可以了： 链接
IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部
weixin_30640769的博客
07-18 192
E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部 DTD已声明IEdocument.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内...
新加数据后刷新数据表格并将滚动条定位到新加入的数据的位置
Zhu_daye的博客
01-03 2039
新加数据后刷新数据表格并将滚动条定位到新加入的数据的位置（适用于排序后的数据）。 一、通过设置滚动条到顶端的距离来控制滚动条的位置。 代码如下： var tableHeight = $("#articletable tbody").height();//获取当前表格tvody的高度,articletable 为table的ID SetScrollTop(tableHeight); //控制...
js滑动滚动条加载更多数据，并保持滚动条位置
zhh369709919的博客
08-06 2023
js滑动滚动条加载更多数据，并保持滚动条位置 实现思路：在加载更多数据前，获取当前列表中的第一个或者最后一个元素位置（firstItem.offsetTop、lastItem.offsetTop），加载更多数据完成后，将滚动条位置定位到获取的元素位置（firstItem.offsetTop、lastItem.offsetTop）。 element.scrollTo({ top: firstItem.offsetTop, behavior:'instant' }) ...
解决chrome滚动条背景的问题
weixin_33885676的博客
10-27 625
大家都知道chrome可以自定义设置滚动条的样式，可以修改很多参数。主要的两行样式的代码如下： ::-webkit-scrollbar{} ::-webkit-scrollbar-thumb{} /* 滚动条滑块 */ 当我们给滚动条背景设置了样式之后，页面的滚动条即便设计了透明度，也还是会有白色的底色 ::-webkit-scroll...
滚动条-任何位置：适用于Google Chrome的滚动条-Anywhere扩展-单击并拖动到任何位置以滚动
01-30
Google Chrome浏览器扩展程序，可以滚动页面，就像滚动条位于指针正下方一样。 只需按配置的鼠标按钮并移动鼠标即可。 如果要滚动样式，只需在选项中进行设置即可。 该扩展基于并受Firefox的Scrollbar Anywhere的...
Html+CSS实现滚动条不挤占内容区宽度.zip
09-01
如果还想自定义滚动条的样式，例如颜色和形状，可以继续添加其他属性： ```css .container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5); /* 滑块颜色 */ border-radius: 10px; /* 滑块圆角...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
08-31
在iOS系统的Web应用中，开发者可能会遇到一个棘手的问题，那就是当尝试使用滚动条滚动到页面的特定位置时，页面会出现空白区域。这个问题通常与 `-webkit-overflow-scrolling` 这个CSS属性有关。该属性是苹果特有的...
重叠式滚动条：:artist_palette:重叠式滚动条可自定义主题，适用于基于Firefox和Chrome的浏览器
02-05
/* 对于不支持自定义滚动条的浏览器，隐藏滚动条 */ html:not(.supports-scrollbar-color) body, html:not(.supports-scrollbar-color) ::-webkit-scrollbar { display: none; } ``` `Overlay-Scrollbars-master`...
还原Chrome滚动条到windows7状态的扩展
10-30
由扁平还原到立体的扩展，crx格式，适合Chrome和360极速浏览器等Chromium内核的浏览器。使用方法：拖动到Chrome的扩展管理页面中。
CSS overflow-anchor属性与滚动锚定
細水、長流√的专栏
12-21 2489
一、滚动锚定是什么？ 大家可能有过这样的浏览体验，就是图片很多的时候，例如漫画网站，尤其是条漫，在手机端，垂直布局这种，如果上方的图片加载慢，那么下方的图片看着看着就会被推下来，然后自己又要重新去滚动定位。 这是一个不太友好的浏览器体验行为。 于是，Chrome 56（2017年）和Firefox 66（2019年）开始最浏览器原来的这些滚动行为进行了优化，实现了一种“滚动锚定”的交互行为。 具体描述为：当前视区上面的内容突然出现的时候，浏览器自动改变滚动高度，让视区窗口区域内容固定，就像滚动效果被
CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容
热门推荐
liuhao9999的博客
06-28 1万+
CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容
element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动
weixin_筱玉的博客
08-17 2569
滚动条无法滚动 自定义合计行
css-anchor
yixiesuifeng的博客
03-20 683
顺序如下： a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */
css3的overflow-anchor
weixin_30376453的博客
05-18 1032
overflow-anchor属性使我们能够选择退出滚动锚定，这是一个浏览器特性，旨在允许内容在用户当前的DOM位置上加载，而不需要在内容完全加载后更改用户的位置。 为何要有这个属性？ 滚动锚定是一种浏览器特性，它试图阻止一种常见的情况，在DOM完全加载之前，你可以向下滚动一个网页，当它完成时，任何加载到当前位置的元素都会把你推到页面的下方。 这是有道理的，为什么会这样。有一...
关于devtreelist刷新数据后定位到刷新前的位置、滚动条自动跑到最上边或最左边的问题
Mark_mwl的博客
07-10 1653
在做完数据增删改操作后需要刷新数据源！我们发现刷新完后滚动条会自动加载到原始位置！我们业务需要在修改完数据后或者刷新数据源后将光标和滚动条恢复到修改或刷新前的位置！ 解决思路： 在修改或刷新前记录行的位置！在数据源修改后修改光标所在行位置！ 实现代码： int RowIndex = treelist.TopVisibleNodeIndex; 刷新或修改操作(); treelist.TopVisibleNodeIndex = RowIndex; ...
overflow:scroll的使用中滚动条固定在最新的数据的位置
doudou15203211327的博客
08-16 1305
当页面刷新到一个新的页面的时候，假如存在关于信息的滚动条，多数时候我们会要求数据展示的是最新的。关于ref属性是可以获取vue中的dom元素并且对相应标签进行操作。使用方法：this.$refs.ref的内容。.........
360浏览器横向滚动条 拖不动
最新发布
12-26
针对360浏览器横向滚动条拖不动的问题，可以尝试以下方法： 1. 使用CSS样式隐藏滚动条： ```css body::-webkit-scrollbar { display: none; } ``` 这段CSS代码可以隐藏Chrome浏览器的滚动条，但对于其他浏览器可能无效。 2. 使用overflow属性隐藏滚动条： ```css body { overflow: hidden; overflow-x: hidden; overflow-y: auto; } ``` 这段CSS代码可以隐藏滚动条，并且保留垂直滚动条，但横向滚动条仍然无法拖动。 3. 使用JavaScript解决滚动条问题： ```javascript document.addEventListener('DOMContentLoaded', function() { var body = document.body; body.style.overflowX = 'scroll'; body.style.overflowY = 'hidden'; }); ``` 这段JavaScript代码可以将body元素的overflow-x属性设置为'scroll'，从而解决360浏览器横向滚动条无法拖动的问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值