开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么两个div的scrollTop不相等？

两个div的scrollTop不相等的原因可能有以下几种情况：

内容溢出：当一个div的内容超过了其容器的高度时，会出现滚动条。如果另一个div的内容没有溢出，则其scrollTop值为0，而溢出的div的scrollTop值会大于0。
CSS样式影响：某些CSS样式可能会影响div的滚动行为。例如，如果一个div设置了overflow:hidden属性，即使内容溢出，其scrollTop值也会为0。
异步加载：如果两个div的内容是通过异步加载的，可能会出现加载时间不同步的情况，导致scrollTop值不相等。
动态改变内容：如果两个div的内容在加载后被动态改变，可能会导致scrollTop值不相等。例如，一个div的内容被动态添加了新的元素，而另一个div的内容没有改变。

针对这个问题，可以通过以下方式解决：

确保内容溢出：检查两个div的内容是否超过了其容器的高度，如果没有超过，可以通过设置合适的高度或使用overflow:auto属性来实现滚动条。
检查CSS样式：检查两个div的CSS样式，确保没有设置overflow:hidden等属性，以允许滚动。
同步加载内容：如果两个div的内容是通过异步加载的，可以使用回调函数或Promise来确保内容加载完成后再进行比较。
监听内容改变：如果两个div的内容可能会被动态改变，可以使用MutationObserver来监听内容的变化，并在变化后重新比较scrollTop值。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

相关搜索:ClearCase -获取两个标签不相等的所有元素 PHP为什么来自两个不同字符串的两个相同值不相等 ScrollTop并不总是位于div中的正确位置 VBA两个相同的数字不相等为什么div没有在两个div之间居中为什么两个DIV不能在父DIV下拖动？为什么两个对象数组在角度上不相等？为什么两个等价的变量不相等？为什么我的两个div总是相邻的？为什么这两个具有相同数据的海图不相等？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

为什么HashCode相同的两个对象可能不相等？

面试中曾经有这么一道题目，考察的是开发者对于 equals()和 hashCode()的理解，题目是这样的，有对象A和B， A.equals(B) == true, A和B的 hashCode可以不同...Set是不允许重复对象存在的，那么当这一千个对象都不重复的情况下，第1000个对象的存储需要调用1000次 equals去进行比较，这是非常低效的。...，如果重复了则用 equals()校验是否相等，如果不相等的话，以 HashMap作为例子，默认是在同一个地址上用链表存储起来新的对象，这在之前介绍哈希冲突的解决办法那篇文章里提到过。...equals和 hashCode的总结在理解了上面 equals的原则和 hashCode的原则之后我们可以推导出这么个结论， · 如果两个对象 equals，那么他们的 hashCode一定要相同(...否则在Set中就会出现重复元素) · 如果两个对象 hashCode相同，他们可以不 equals 所以如果不好记住这俩的关系的话，可以试着从数据集合的存储这个角度出发来理解eqauls和 hashCode

3K3 0

网站建设设置两个div div常见的布局方式

div也就是division，是一种常用的HTML 网页当中的重要元素。主要作用是分割网页当中的文档。那么网站建设设置两个div 如何操作呢？...网站建设设置两个div 网站建设设置两个div 的方式和步骤可以参照以下内容。首先插入两个div 的标签，插入之后，创建一个长宽都是200px的标签，给它命名。...这时候看到了两个标签的位置是上下的，下一步就双击CSS 样式的其中一个标签，在CSS 的分类选项里面，将Float设置成为left，也就是向左边移动。这样就可以完成div 并排了。...div常见的布局方式网站建设设置两个div 的步骤是非常简洁的，除此之外，div 还有其它几种常见的布局方式。第一种就是垂直排列，也就是标签是垂直平铺排列的，这也是一种最常见的网页布局格式。...以上就是网站建设设置两个div的相关内容，每一种div 布局方式的展现效果都是不同的，根据不同的网络效果来选择布局方式就可以。

1.6K2 0

python不相等的两个字符串的 if 条件判断为True详解

bool(0) False 鉴于任何值都可用作布尔值因此你几乎不需要显式地进行转换（Pthon会自动转换）虽然[]和””都为假（即bool([]) == bool(“”) == False），但它们并不相等...从理论上说，可使用<和<=等运算符比较任意两个对象x和y的相对大小，并获得一个真值，但这种比较仅在x和y的类型相同或相近时（如两个整数或一个整数和一个浮点数）才有意义。...因为is检查两个对象是否相同（而不是相等）。变量x和y指向同一个列表，而z指向另一个列表（其中包含的值以及这些值的排列顺序都与前一个列表相同）。这两个列表虽然相等，但并非同一个对象。这好像不可理喻？...如你所见，x is not y（与x is y相反）的结果为True，接下来，我稍微修改了这两个列表，现在它们虽然相等，但依然是两个不同的列表。...在很多情况下，宁愿使用条件表达式，而不耍这样的短路花样。以上这篇python不相等的两个字符串的 if 条件判断为True详解就是小编分享给大家的全部内容了，希望能给大家一个参考。

6K1 0

HTML5 的拖放（实例：两个div之间拖放图片）

事件规定在何处放置被拖动的数据。...如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：当放置被拖数据时，会发生 drop 事件。...调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）通过 dataTransfer.getData("Text") 方法获得被拖的数据。...该方法将返回在 setData() 方法中设置为相同类型的任何数据。被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素（目标元素）中结果----》拖动前 ? 拖动后 ?...在两个元素之间拖放图像--- 代码清单： <!

2.1K1 0

css实现内容不相同的左右两个div等高

问题提出现在有两个div左右排列，但是两个div的内容不相同，如何设置两个div的css做到在两个div等高排列呢？下面是网上找的3种实现方法，觉得很有代表性，所以索性收藏起来。...方法一通过父元素设置 overflow:hidden, div自己设置padding-bottom 和 margin-bottom来实现。... left right #wrap { overflow: hidden; width: 1000px; margin

3.9K2 0

CSS一个div内两个子元素的高度自适应

---- 设想这样一个情况：一个父元素有两个子元素，父元素的高度不确定，用子元素撑起来。但是这会导致一个问题：各个子元素的高度不一致，为子元素添加height:100%是无效的。...这种方式需要父元素高度确定，然而父元素的高度由子元素确定。猜想渲染时由于父元素高度不确定，会计算出各个子元素的高度再确定父元素高度，但计算子元素高度时并没有父元素高度可以参考，因此上述方法行不通。...你可以为父元素设置固定高度配合height:100%，两个子元素都能撑满父元素利用span元素与布局如果span的定位是absolute类型，那么它的高度可以等于父元素的高度。...父元素只根据相对定位的子元素决定高度，也就是说，absolute定位的span设置height:100%是有效的，父元素的高度对它来说是已知的。...这种方法下，父元素的高度仍然由最高的相对定位的子元素确定，其它元素放到span中，所以需要知道最高的子元素。使用同色背景虽然很简单，却很实用的方法。子元素的高度虽然不都是100%，但效果一样。

4.9K3 0

如何渲染几万条数据并不卡住界面

代码存放在VirtualScroll/zoneRender 虚拟滚动列表形式长列表的渲染主要存在两个问题白屏时间过长页面节点过多分片实现解决了第一个问题，但页面节点仍然是全量的。..."> {{ scope.item.value }} 组件内部的结构则如下 <div class="lan-viewport"... 每项高度已知 methods: { handleViewportScroll() { let scrollTop = this....$refs.viewport.scrollTop if (this.variable) { this.start = this.getStartIndex(scrollTop) // 算出开始的位置...scrollTop值大概率和列表中的top/bottom不相等，所以我们期望去找到一个区间且最接近的值。

5501 0

Vue 返回记住滚动条位置详解

当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。...二、获取并存储当前 scrollTop 页面布局如下：整个页面是一个，下面又分了两个 tab，我们列表页是一个组件，位于 title 和导航栏之间的区域。...为什么给出这么多呢？因为这里有个大坑，也是我一直卡住的地方。我们知道获取滚动位置是用 scrollTop 这个属性，下面我们就依次打印出这几个元素的 scrollTop 。...我也不知道为啥，之前一直是获取后三者的 scrollTop ，一直获取不到，纠结了好久。为什么其他三个获取不到我现在还没整明白，知道原因的大佬可以指点一下。...$refs.wrapper.scrollTop = this.scroll } 完整的代码如下：

2.7K3 0

JS判断滚动条是否停止滚动

背景：昨天一个同事有种需求，有一个展示数据区域的div，带滚动条，当滚动条滚动时，需要向后台发请求，计算数据，再拿到前台展示。 ...后来想到的思路是当滚动条滚动的时候，发起一个定期执行的方法，并记录一次当前滚动条到顶部的距离，这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等，如果相等，那么说明停止滚动了，不相等，还在滚动。.../ 未发起时，启动定时器，1秒1执行 interval = setInterval("test()", 1000); topValue = document.documentElement.scrollTop...; } function test() { // 判断此刻到顶部的距离是否和1秒前的距离相等 if(document.documentElement.scrollTop == topValue...，时间越短，响应的越及时，浏览器压力越大；时间越长，响应的越慢，浏览器压力越小。

17.3K0 0

滚动，你真的懂了吗

滚动的几种场景只有window窗体滚动内滚动布局窗体滚动+DIV内滚动这时候，台下观众会问，什么是内滚动布局，什么是window滚动呢？...（具体为什么ios上和android上会使用不同的滚动方式，可以去了解下=。=）内滚动布局什么时候会使用了？...滚动计算基础知识由于不同浏览器其窗体滚动条的属性获取方式有所差异，故考虑兼容性，我们假设使用了场景是移动到，并且使用了zepto的库首先，我们想要更好的操作控制条，需了解两个地方滚动条属性滚动条调用方法...//浏览器滚动条偏移值: $(document.body).scrollTop(); //节点offset值 $("#div").offset().top; $("#div").offset().left...; //节点的宽高 $("#div").height(); $("#div").width(); //节点的滚动条偏移值 $("#div").scrollTop(); ---- 现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值

1K1 0

美团前端面试题（附答案）

Object.is 实现题目描述:Object.is不会转换被比较的两个值的类型，这点和===更为相似，他们之间也存在一些区别。 1....NaN在===中是不相等的，而在Object.is中是相等的 2. +0和-0在===中是相等的，而在Object.is中是不相等的实现代码如下:Object.is = function (x,...在项目中，一般在beforeEach这个钩子函数中进行路由跳转的一些信息判断。判断是否登录，是否拿到对应的路由权限等等。为什么需要浏览器缓存？...为什么？...document.body.scrollTop;图示：代码实现： <img src="loading.gif" data-src="pic.png

3040 0

写了个自定义指令，支持elementUI2.0下拉框组件虚拟列表显示

= wrap.scrollTop; // 计算当前滚动位置，获取当前开始的起始位置 const currentIndex = Math.floor(scrollTop...; // console.log(startIndex, 'startIndex222', currentIndex); // 根据滚动条获取当前索引与起始索引不相等时...// 设置el-scrollbar__view的高度 scrollView.style.height = `${total * rowHeight}px`; 用一张图还原一下，为什么需要设置scrollView...scrollTop = wrap.scrollTop; // 计算当前滚动位置，获取当前开始的起始位置 const currentIndex = Math.floor(scrollTop /...> </div

2.1K2 0

滚动，你真的懂了吗

滚动的几种场景只有window窗体滚动内滚动布局窗体滚动+DIV内滚动这时候，台下观众会问，什么是内滚动布局，什么是window滚动呢？...（具体为什么ios上和android上会使用不同的滚动方式，可以去了解下=。=）内滚动布局什么时候会使用了？...滚动计算基础知识由于不同浏览器其窗体滚动条的属性获取方式有所差异，故考虑兼容性，我们假设使用了场景是移动到，并且使用了zepto的库首先，我们想要更好的操作控制条，需了解两个地方滚动条属性滚动条调用方法...//浏览器滚动条偏移值: $(document.body).scrollTop(); //节点offset值 $("#div").offset().top; $("#div").offset().left...; //节点的宽高 $("#div").height(); $("#div").width(); //节点的滚动条偏移值 $("#div").scrollTop(); 现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值

1.6K7 0

为了秋招，我开发了一款页面元素高亮插件

#3 副作用最后一步是对上边两个方法对调用，同时注意我们需要通过ReactDOM.render的API将React组件渲染到刚才的创建的节点上。这里为什么不用传送门？...麻烦的是我们如何确定菜单呈现的位置，如何模拟正常的操作菜单的交互 #1 处理边界情况这里看着可能会模糊看一下这里，为什么我需要将ref.current的宽高赋值给memoAttr?...原因在于，我们的菜单组件，在display:none的时候是没有宽高的，我们需要在一开始便拿到组件的宽高，以便于在隐藏的时候仍可以做计算。哈？那为什么不用visibility来控制显隐？...因为我们会发现正常的选择器并不能选择到某一个/段文本（否则也不会需要做文本替换）这样处理出来的XPath类似于 'id("gatsby-focus-wrapper")/DIV[1]/DIV[1]/DIV...[2]//DIV[2]/DIV[1]/DIV[2]/DIV[2]' 再次使用的时候可以通过document.evalute这个API进行选择而对于定位自己添加的节点，我们在节点替换时就会有一个带有

1.1K3 0

这实现牛逼了，原来阮大佬博客的阅读进度功能这么简单

因此学习本文，你可以学会: 使用 JavaScript 实现阅读进度功能使用 CSS 实现阅读进度功能利用JavaScript实现阅读进度 HTML与CSS html css 部分非常简单，通过嵌套的两个...div 实现，外部的 div 提供底色背景，内部 div 显示阅读进度 </...|| document.body.scrollTop 光看上面三个属性的名字有几分难以理解，来看一张示意图从上图可以看到 scrollTop 就是已经读过被卷起来的文档部分，scrollHeight...= +(scrollTop / (scrollHeight- clientHeight)).toFixed(2)*100 + '%' 复制代码大家可能会有疑惑，为什么分母是 scrollHeight...当滚动条滚动到底部时，浏览器此时仍显示一屏内容，此时滚动条无法再滚动，scrollTop 无法再增加，因此 scrollTop 的最大值是 scrollHeight- clientHeight ，如果使用

6833 0

手把手带你10分钟手撸一个简易的Markdown编辑器

> ) } 这是我做的时候的第一版，确实是实现了两块区域的同步滚动，但是存在两个bug，来看看是哪两个 bug1：这是一个很致命的bug，先埋个伏笔，先来看效果： ?...同步滚动的效果实现了，但能很明显得看到，当我手动滚动完以后停止了任何操作，但是两个区域仍然在不停的滚动，这是为什么呢？...编辑区和展示区的可视高度是一样的，但一般编辑区的内容经过markdown渲染后，总的滚动高度是会高于编辑区总的滚动高度的，所以我们无法仅凭scrollTop和scrollHeight使得两个区域同步滚动...> ) } 两个bug都已经解决了，同步滚动的功能也算完美实现啦。...但对于同步滚动这个功能，其实有两种概念，一种是两个区域在滚动高度上保持同步滚动；另一种就是右侧的展示区域对应左侧的编辑区的内容进行滚动。

1.9K1 0

手把手带你10分钟手撸一个简易的Markdown编辑器

> ) } 这是我做的时候的第一版，确实是实现了两块区域的同步滚动，但是存在两个bug，来看看是哪两个 bug1：这是一个很致命的bug，先埋个伏笔，先来看效果：同步滚动的效果实现了，但能很明显得看到...，当我手动滚动完以后停止了任何操作，但是两个区域仍然在不停的滚动，这是为什么呢？...那就是两个区域其实还没完完全全实现同步滚动。...> ) } 两个bug都已经解决了，同步滚动的功能也算完美实现啦。...但对于同步滚动这个功能，其实有两种概念，一种是两个区域在滚动高度上保持同步滚动；另一种就是右侧的展示区域对应左侧的编辑区的内容进行滚动。

1.5K2 0

为什么我的两个表建立数据关系有问题？

小勤：大海，为什么我这两个简单的表建立数据关系有问题啊？大海：啊？出什么问题了？...小勤：你看，我先将表添加到数据模型，这是订单明细表的：用同样的方法将产品表也添加到数据模型，然后创建表间关系，结果出错了！大海：你的产品表里的产品名称重复了。小勤：啊？...里面有两个小米，一个是宏仁生产的，一个是德昌生产的。但是，产品名称重复不行吗？大海：当然不行啊，你产品名称是重复的，我怎么知道订单明细表里的产品应该对应你产品表里哪一个啊？让这两个小米要打一架？...大海：那你能保证用vlookup查到的结果是你想要的吗？小勤：啊，也对，vlookup都是返回最先找到的一个，这可能是错的。大海：所以说，仔细想想，这种逻辑是不能成立的。...小勤：啊，知道了，看来我还是得把订单明细表里的产品ID放出来，不然做出来的数据分析都是不对的。大海：很棒，这么快就想到产品ID的问题了。

1.1K2 0

react学习(九) React 新的生命周期

这里为什么使用静态方法呢？...例如你在渲染前浏览器滚动条 scrollTop，更新后会变化，你就可以记住当前状态进行计算。...getSnapshotBeforeUpdate() { // 记住当前滚动条位置 return { prevScrollTop: this.container.current.scrollTop...{msg}>{msg} })} } } 既然也是在渲染前触发该方法，同样我们在 forceUpdate 中的 render 前实现： forceUpdate...本节概念不是很多，主要是了解了 react 为了 fiber 提出了两个新生命周期。下一小节我们学习下 react 中的 context 概念。

3453 0

聊聊苹果营销页中几个有趣的交互动画

❞ 两个效果翻盖效果一个是屏幕慢慢打开的效果，在屏幕打开的过程中，「电脑图片」是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让「电脑图片」随着滚动条滚动。 ?...其实这样我们就可以很清楚的知道为什么 sticky 元素的高度为什么不能等于它爸爸的高度了，因为如果相等的话，粘性定位元素已经完全没有了实现粘性效果的空间，也就相当于失效了。...笔者使用 react Hooks 来完成这两个动画效果，并使用 umi 快速初始化一个项目，具体的初始化步骤可以参考笔者写的 dva理论到实践——帮你扫清dva的知识盲点[10]，里面详细介绍了如何使用脚手架快速搭建一个项目...❞ 缩放图片缩放图片到屏幕这个动画我们可以用两个方式实现，一个是「滚动视差」实现，一个是 canvas 在滚动过程中实时渲染图片。开始之前我们来看一下没有放大的之前图，如下： ?...总结今天讲了两个苹果营销页面的动画，文章没什么难点，主要是对几个基础知识点的运用。「粘性定位」、「滚动视差」、「Canvas 画图」、「matrix 属性的使用」等等，希望对大家有所帮助。

1.9K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭