JQ scrollTop 无效的场景

最新推荐文章于 2024-02-28 11:02:30 发布
最新推荐文章于 2024-02-28 11:02:30 发布
阅读量474 收藏
点赞数
原文链接：http://www.cnblogs.com/llcdxh/p/9855920.html
版权

先要设置DOM为显示，然后在设置scrollTop，先后顺序不能调换。

转载于:https://www.cnblogs.com/llcdxh/p/9855920.html

scroll-top不会生效的原因
weixin_64974855的博客
06-07 386
/如果scrollTop赋值与原来的值一样，scroll-top是不会生效的。
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---JavaScript篇
m0_54853146的博客
03-07 615
★★ 介绍一下JS的内置类型有哪些？ ★★★★ 介绍一下 typeof 区分类型的原理 ★★★ 介绍一下类型转换 ★★★★ 说说你对 JavaScript 的作用域的理解。什么是作用域链？ ★★ 解释下 let 和 const 的块级作用域 ★★★★ 说说你对执行上下文的理解 ★★★ 对闭包的看法，为什么要用闭包？说一下闭包的原理以及应用场景？闭包的 this 指向问题？ ★★★ 简述闭包的问题以及优化 ★★★ 如何确定 this 指向？改变 this 指向的方式有哪些？ ★★★ 介绍箭头函数的 this
jquery无效滚动插件
11-05
该文件包含三个jquery的页面底部自动加载的插件，下载后引入项目中直接可使用
元素scrollTop设置无效的原因及解决办法
wbr306408943的博客
04-10 6万+
在做项目时，需要设置一个隐藏的元素的scrollTop，然后将其显示。当时使用了jQuery的scrollTop方法，但是无效，百度了许久，仍找不出有效的解决方法。于是自己新建了一个网页用来测试scrollTop方法失效的原因，在一番折腾后，终于弄清楚了问题的原因和解决办法。      scrollTop失效的原因    当一个元素的display属性为'none'时，对该元素设置scroll
浅析scrollTop方法失效的原因！！！
fxdan的博客
06-29 2448
很久没用jq开发前端了，最近新入职一家公司是前后端不分离，项目主要是用了JQ开发，做了个点击控制滚动条的方法。结果蒙圈了一波，思考了许久，终于知道原因在哪，话不多说，直接给大家说解决方案。 不生效源代码是这样的： html, body, .page { padding: 0; margin: 0; } // 处理楼层滚动 var page = $('body > .page'), floorTabs = $('.floor-tabs .tab-item') floorTab.
scrollTop不生效的原因解决方法
前端小师姐迪迪_的博客
02-21 1万+
scrollTop 设置 不生效；scrollTop 一直为0；
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   <html> <head> <title></title> </head> <bod...
vue笔记总结
qq_44417271的博客
02-01 1615
VUE vue框架的两大核心： 数据驱动和组件化。 第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM） 第二周：大家需要转变编程思维的习惯：组件化 一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签， 实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XM
vue_t_v14
l1029455098的博客
03-21 2899
vue
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
踩坑记录：uniapp中scroll-view的scroll-top不生效问题；
qq_44776454的博客
12-05 5825
踩坑记录：uniapp中scroll-view的scroll-top不生效问题 的详细解决思路
jquery mobile 使滚动条滚动到底部scrollTop函数无效的解决方法
q616804668的专栏
02-17 5125
$('body').scrollTop(100); 我们使用上面的scrollTop函数时发现滚动后又闪回顶部，原因是在jquery mobile 中要使用另外的函数  $.mobile.silentScroll(100); 这个函数需要你点击DIV再调用才有效果，如果一开始就设置是没效果的 像下面用是没效果的  $(document).ready(function() {
scrollTop不生效的解决办法
ToKeepCalm的博客
02-28 2418
例如：document.getElementById('logContainer')中的。你设置的是另一个元素的滚动条，和你需要设置的滚动条有什么关系，所以导致滚动条不会生效。scrollTop不生效可能的原因有多个，请挨个进行排查！确定你设置滚动条的元素ID是否正确且唯一。，该ID是否唯一，若不唯一，则可能导致滚动条不生效（可能很多人有疑问了，这还能有错？
异步加载设置元素的scrollTop不生效
sxl131415的博客
07-11 531
解决方案：scrollTop需要在异步加载完成后再调用，因为是异步的，在去后台获取数据的时候，如果scrollTop就触发了，那么就出现不生效的情况
解决给元素设置scrollTop但不生效问题
kwroi的博客
11-15 4780
scrollTop
（react）设置scrollTop无效的原因及解决方法
weixin_51719919的博客
03-11 1万+
一、项目的需求描述 不停的请求后端日志，输出到页面上，当用户不做任何操作时，动态显示日志，即放日志的盒子里面内容滚动到最底部；当用户触发了滚动事件查看历史日志时，盒子不再滚动到最底部，随着用户的滚动显示对应的日志，且确保不会中断请求日志，当用户再次滚动到页面最底部并且不再做任何操作时候，再次实现盒子里面内容动态滚动到最底部（类似聊天界面，只要你不翻看聊天记录，就会滚动显示最新消息） 二、设置scrollTop的方法 1. 原生 HTML 中使用 JS 直接修改 方法一：使用scrollTo函数来设置滚动条的
解决设置scrollTop不起作用
weixin_45700321的博客
04-23 3049
我操作是 $(#el-tree)的目标，给它设置了半天scrollTop始终不生效，因此排查问题所在，才知道需要找到滚动条目标层级，进行动态设置scrollTop，问题解决。首先场景是一个异步树：支持模糊搜索，当搜索到结果时，会有选中效果，但是搜索的结果可能会超出树的显示范围，因此需要手动滑动滚动条到选中位置。但是呢，树节点太多，无法及时到目标位置，因此根据选中位置，将滚动条滑动到目标位置，设置scrollTop。注意：offsetTop 就是当前选择节点的属性，以及注意overflow设置为 auto。
设置元素的scrollTop不生效的解决办法
Arbort
08-19 5545
这里以vue项目为例,先看结构,使用ref获取元素; <template> <div class="dialogBody" ref="dialogBody"> <!-- 话语框 --> </div> </template> 1.元素必须包含的样式属性 .dialogBody{ overflow-x: hidden; overflow-y: auto; } 2.要确保这个元素的确有滚动条
react设置scrollTop无效
最新发布
01-01
### 解决 React 中设置 `scrollTop` 属性无效的方法 在 React 应用程序中，直接操作 DOM 节点的方式可能会遇到一些问题，特别是当涉及到更新像 `scrollTop` 这样的属性时。为了确保设置 `scrollTop` 生效，推荐使用更现代和兼容的方式来处理滚动行为。 #### 使用 `ref` 和 `scrollTo` 一种有效的方法是利用 React 的 ` useRef()` 钩子获取对目标元素的引用，并调用该元素上的 `scrollTo` 方法来实现平滑滚动效果[^2]： ```jsx import React, { useEffect, useRef } from 'react'; function ScrollComponent() { const scrollContainerRef = useRef(null); useEffect(() => { if (scrollContainerRef.current) { scrollContainerRef.current.scrollTo({ top: 600, behavior: "smooth" }); } }, []); return ( <div ref={scrollContainerRef} style={{ overflowY: 'auto', height: '300px' }}> {/* 子组件 */} </div> ); } ``` 这种方法不仅能够保证 `scrollTop` 值被正确应用到指定容器上，而且还可以提供更加流畅自然的用户体验。 #### 结合 `useLayoutEffect` 提升性能 对于某些场景下可能需要立即执行的操作（例如页面加载完成后立刻定位到某个位置），可以考虑采用 `useLayoutEffect` 来替代 `useEffect` 。这能确保所有的 DOM 变动都已完成后再进行下一步动作，从而提高效率并减少闪烁现象的发生[^3]: ```jsx import React, { useLayoutEffect, useRef } from 'react'; function ImmediateScrollComponent() { const immediateScrollRef = useRef(null); useLayoutEffect(() => { if (immediateScrollRef.current) { immediateScrollRef.current.scrollTop = 600; } }, []); return ( <div ref={immediateScrollRef} style={{ overflowY: 'auto', height: '300px' }}> {/* 子组件 */} </div> ); } ``` 通过上述两种方式之一，在大多数情况下都可以成功地解决 React 组件内无法正常设置 `scrollTop` 的难题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值