开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

两个div同时滚动，直到其中一个滚动到底部。

两个div同时滚动，直到其中一个滚动到底部的实现方式可以通过监听滚动事件来实现。具体步骤如下：

首先，给两个div添加滚动事件监听器。
在滚动事件的回调函数中，判断两个div的滚动位置是否到达底部。
如果其中一个div到达底部，则移除另一个div的滚动事件监听器，停止其滚动。
如果两个div都没有到达底部，则继续滚动。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .scrollable {
      height: 200px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <div id="div1" class="scrollable">
    <!-- div1的内容 -->
  </div>
  <div id="div2" class="scrollable">
    <!-- div2的内容 -->
  </div>

  <script>
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');

    div1.addEventListener('scroll', scrollHandler);
    div2.addEventListener('scroll', scrollHandler);

    function scrollHandler() {
      if (div1.scrollTop >= div1.scrollHeight - div1.offsetHeight) {
        // div1滚动到底部
        div2.removeEventListener('scroll', scrollHandler);
      } else if (div2.scrollTop >= div2.scrollHeight - div2.offsetHeight) {
        // div2滚动到底部
        div1.removeEventListener('scroll', scrollHandler);
      }
    }
  </script>
</body>
</html>

这段代码中，我们给两个div添加了相同的滚动事件监听器scrollHandler。在scrollHandler函数中，我们通过判断滚动条的位置是否到达底部来决定是否移除另一个div的滚动事件监听器。

这种实现方式可以适用于各种场景，例如需要两个div内容同步滚动的情况，比如聊天窗口、日历等。在腾讯云的产品中，可以使用腾讯云的云服务器（CVM）来部署和运行这段代码。具体产品介绍和相关链接可以参考腾讯云的官方文档。

相关搜索:PrimeNG p树水平滚动条隐藏，直到我向下滚动到div底部如何使DIV在滚动后伸展到页面底部如何在Mozilla Firefox上同时滚动两个div？如何在滚动div中将文本区域固定到屏幕底部使用滚动和标题将div扩展到视口的底部当div到达窗口底部时，按住并滚动到下一个div 我如何制作一个div，在其中我可以滚动md-card？在td中创建一个可滚动的div，其中的div定义了绝对位置如何让底部滚动条绑定到正文中溢出的div，而不是整个正文？当我们向上滚动时，两个div缩小，另一个div gowing 使一个div可滚动，直到结束，如果另一个重叠(基本上改变div的高度)当只悬停一个div时，如何阻止垂直slick在两个div中滚动？如何将一个固定的Div显示在另一个Div后面的底部，像视差一样滚动显示如何让同一个父容器中的两个div彼此独立滚动？我不确定这是否可行，但我希望在视口底部放置一个条，直到页脚滚动到视图中为止将一个div固定到列的顶部，将另一个div固定到底部，而不是两个重叠剑道网格:需要两个水平滚动条，一个在标题栏下方，另一个在网格底部。如何使两个回收器视图可垂直滚动。其中一个是水平的，另一个是垂直的如何控制在div中加载外部php文件时两个滚动条出现在一个屏幕上

相关搜索:

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

有帮助

没帮助

相关·内容

【自动化实战】（三）筛选活动中点赞数量 TOP5 的作品

背景在参加社区的技术创作特训营活动，其中有个 “最受欢迎创作者” 奖项，需要单篇作品点赞量 TOP3 的作者才能获奖，本来是无意参与其中，后来发现自己有机会，就努力了一下，没想到自此一发不可收拾，对手们都太猛了.../div/div[2]/com/div/section[21]/div[2]/div[2]/div[2]/span[2] 2、因为每一个作品都是一个 section 块，因此需要获取当前页面的 section...，模拟鼠标滚轮一直往下翻，直到到底部为止。...在 JS 中有个方法能够滑动页面 window.scrollBy(0, 4000)，同时还有一个方法能够获取当前滚动条距离顶部的距离 document.documentElement.scrollTop...|| window.pageYOffset || document.body.scrollTop;，于是将这两个方法组合在一起，我们就可以控制滚动条一直滑动到最底部了，代码如下所示： def roll

1152 0

实现滚动时Header自动隐藏

样式首先，我们先通过两个 div 来模拟这两个header <div class="main-header...同时为元素设置transition，提供缓动效果。这样，header的显示和隐藏就实现了，接下来就是检测滚动方向。...、滚动状态（到顶部/到底部）和是否在滚动其中，函数返回的 directions 是一个 reactive 对象，我们对其进行监听，当该变量发生变化时，说明滚动方向发生了改变。...甚至y值能到负值查看示例这里还有一个问题，只检测了滚动到顶部，而没有检测滚动到底部。这是因为我没想到什么很好的方法去检测。...前者，可以通过判断y值是否为0（或小于0）来实现；而后者，正常来说，滚动到底部时，文档高度-视窗高度应该和滚动条的y值是一致的。

2.3K3 0

如何使用 CSS 设置和自定义水平和垂直滚动条

overflow-y属性接受两个值之一：scroll或auto。将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容，容器始终会有一个滚动条。...下面的截图显示了一个橙色容器，其中包含一系列蓝色正方形，这些正方形的宽度超出了容器的宽度。如果容器具有水平滚动条，它会看起来更好。...">6 7 页面在屏幕左下角有一个默认的水平滚动条，但您不希望网站的用户使用它。...您还可以希望使用不同的颜色来设置滚动条，以便更容易注意到它。...为了实现所有滚动条的统一定制，我们可以按如下方式应用样式：在不选择任何特定元素、标签或类名的情况下应用滚动条样式在网站同时具有水平和垂直滚动条的情况下，为两个属性的height和width同时赋值。

1.5K0 0

《最新出炉》系列入门篇-Python+Playwright自动化测试-50-滚动条操作

1.简介有些页面的内容不是打开页面时直接加载的，需要我们滚动页面，直到页面的位置显示在屏幕上时，才会去请求服务器，加载相关的内容，这就是我们常说的懒加载。...2.2示例# 页面滚动条，滚动直到此出现元素page.locator("//div[contains(@class, 'react-grid-item')][last()]").scroll_into_view_if_needed...在页面中如果有两个滚动条，要操作目标滚动条，首先要使用当前光标移动至滚动条所在框中（div 、iframe等），才可以进行操作。...3.2示例# 光标移动至滚动条所在框中page.click("div.content-main")# 滚动鼠标 , 参数给一个较大值，以保证直接移动至最后page.mouse.wheel(0,10000...，所以滚动到底部）。

2302 0

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

⭐️ star 支持一下同时，我也给大家提供了一个在线体验的地址 (opens new window)，因为做的比较仓促，欢迎大家给我提意见和pr 具体实现具体的实现也是按照我们上述列出来的功能的顺序来一一实现的...> ) } 这是我做的时候的第一版，确实是实现了两块区域的同步滚动，但是存在两个bug，来看看是哪两个 bug1：这是一个很致命的bug，先埋个伏笔，先来看效果：同步滚动的效果实现了，但能很明显得看到...，当我手动滚动完以后停止了任何操作，但是两个区域仍然在不停的滚动，这是为什么呢？...那就是两个区域其实还没完完全全实现同步滚动。...使得两个区域同步滚动，比较晦涩，用具体的数据来看一下属性编辑区展示区 clientHeight 300 300 scrollHeight 500 600 假设我们现在滚动编辑区到最底部，那么此时

1.5K2 0

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

// //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...，当我们要设置一个固定在顶部的菜单、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单...如果设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容和，不要同时设置 menu: '...// //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...，当我们要设置一个固定在顶部的菜单、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单

11.8K3 0

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

我也将本文的代码放在了 Github 仓库 (opens new window)上了，欢迎各位点个 ⭐️ star 支持一下同时，我也给大家提供了一个在线体验的地址 (opens new window...，免得以后也犯同样的错误刚开始主要实现思路就是当滚动其中一块区域时，计算滚动比例（scrollTop / scrollHeight），然后使另一块区域当前的滚动距离占总滚动高度的比例等于该滚动比例 import...> ) } 这是我做的时候的第一版，确实是实现了两块区域的同步滚动，但是存在两个bug，来看看是哪两个 bug1：这是一个很致命的bug，先埋个伏笔，先来看效果： ?...那就是两个区域其实还没完完全全实现同步滚动。...，比较晦涩，用具体的数据来看一下属性编辑区展示区 clientHeight 300 300 scrollHeight 500 600 假设我们现在滚动编辑区到最底部，那么此时「编辑区」的 scrollTop

1.9K1 0

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane 和 mCustomScrollbar。...");：滚动到顶部（垂直滚动条） $(selector).mCustomScrollbar("scrollTo","bottom");：滚动到底部（垂直滚动条） $(selector).mCustomScrollbar...");：滚动到内容区域中的最后一个对象位置 $(selector).mCustomScrollbar("scrollTo",Integer);：滚动到某个位置（像素单位） scrollTo 方法还有两个额外的选项参数...moveDragger: Boolean：滚动滚动条的滑块到某个位置像素单位，值：true，flase。...这样，这个 div 就扩充到了整个浏览器界面，这样就可以被当做是一个网页的 body。然后加上 overflow：auto 让其超出自动出现滚动条。这样就可以模拟出修改了浏览器滚动条的效果。

14.1K3 0

从 antDesign 来窥探移动端“滚动穿透”行为

您可能还注意到，当滚动内容页面顶部有一个包含滚动内容的对话框时，一旦到达对话框的滚动边界，底层页面就会开始滚动 - 这称为滚动链接。...比如上方图片中有两个元素，一个为红色边框存在滚动条的父元素，另一个则为蓝色边框黑色背景不存在滚动条的子元素。当我们拖动不可滚动的子元素时，实际会意外造成父元素会跟随滚动。...将可滚动元素拖动至顶部或者底部时，继续拖动触发最近可滚动祖先元素的滚动。还有另一种常见场景，我们在某个可滚动元素上进行拖动时，当该元素的滚动条已经到达顶部/底部。...而对于目标节点可以滚动时，当滚动到顶部/底部继续进行滚动时，同样会意外触发祖先节点的滚动。...想象一下，如果你的页面中每个 Modal 弹窗都使用了 useLockScroll 这个 hook ，那么当页面中开启两个弹窗，当关闭一个时另一个还存在时总不能移除了 BODY_LOCK_CLASS 吧

4752 0

【JS】322- 手把手教你实现前端惰性加载

我们可以在浏览器滚动到一定的位置的时候进行下载，这也就是们通常所说的惰性加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。 ?...2、可以设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。3、可以在计算的时候，增加偏移数据，提前加载图片，并使用淡入效果，提高流畅性。...这种条件下，假设 bound=el.getBoundingClientRect()，随着滚动条的向下滚动，bound.top会越来越小，也就是图片到可视区域顶部的距离越来越小，当 bound.top==...举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。isIntersecting，返回一个布尔值, 如果目标元素与交叉区域观察者对象的根相交，则返回 true 。...实现下拉无限滚动： ? 在页面底部有一个loading状态标签。一旦标签可见，就表示用户到达了页面底部，从而加载新的条目放在标签的前面。

9593 0

如何实现一个能精确同步滚动的Markdown编辑器

同时unified也代表一个生态，要完成前面说的文本处理任务需要配合其生态下的各种插件，截止到目前，它生态中的插件已经有三百多个！鉴于数量实在太多，很容易迷失在它庞大的生态里，可谓是劝退生态。...0呢，上面CodeMirror的文档截图里其实有说明，返回的高度是这一行的底部到文档顶部的距离，所以要获取某行顶部所在高度相当于获取上一行底部所在高度，所以将行数减1即可： let offsetTop...]; } }; 效果如下：修复节点内滚动不同步的问题可以看到跨节点滚动已经比较精准了，但是如果一个节点高度比较大，那么在节点内滚动右侧是不会同步滚动的：原因很简单，我们的同步滚动目前只精确到某个节点...previewElementList[scrollElementIndex]) + previewElementList[scrollElementIndex]; } }; 效果如下：修复两边没有同时滚动到底部的问题...，但是滚动却还在继续，原因也很简单，因为两边都绑定了滚动事件，所以互相触发跟随滚动，导致死循环，解决方式也很简单，我们设置一个变量来记录当前我们是在哪边触发滚动，另一边就不执行回调逻辑： <div

8811 0

clientWidth，offsetWidth，scrollWidth你分的清吗

---- 前言最近在开发时遇到这样一个需求，一个表单列表报错后，滚动表单到能展示报错元素，做的时候发现clientWidth，offsetWidth，scrollWidth这几个概念自己有时候还是会弄混...inline的元素这个属性一直是0 offsetTop/offsetLeft/offsetRight/offsetBottom：代表元素距离父级元素的相对距离，但是父级元素需要具有relative定位，直到找到...getBoundingClientRect() 它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离...; 　var Y = node.getBoundingClientRect().top+node.scrollTop; 一个demo加深印象有一个列表，当我们输入文段编号，列表会将选中文段滚动到视图中...// 选中元素距离浏览器的高度 const { top } = this.pRef[`ref${value}`].getBoundingClientRect(); // needScroll就是元素底部距离滚动容器顶部的距离

2K1 0

AI网络爬虫：批量爬取抖音视频搜索结果

定位到元素位置：《梅西的Al道歉》本年度最佳 Al视频，看来梅西还想在中国淘金，这才是真正的“商业头脑”#梅西 #梅西道歉 #Sora #数字人</div...type=video；等待网页加载，延迟50秒；解析源代码，并打印输出； selenium控制滚动条滚动到网页最底部，使数据全加载出来：使用一个无限循环来模拟滚动条的滚动，直到滚动条到达页面底部。...在每个循环迭代中，都记录前一个页面高度（prev_height），然后使用JavaScript滚动到页面底部。停顿10秒钟，以便页面可以加载更多内容。...如果它们相等，说明已经滚动到了页面底部，可以退出循环。...为了解决这个问题，我们可以使用 concat 函数来代替 append 注意：每一步都要输出相关信息到屏幕；每爬取一个li 标签里面的内容，就随机暂停5-10秒；设置请求头，来应对反爬虫机制；代码不要分成一段一段的

1821 0

SCrollTOP scrollHeight

其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。...实际上，在js代码里，滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”（b），而是表示滚动条需要滚动的高度，即内部div的高度750px。...而scrollTop表示滚动条（一个点）当前的位置在750px里占了多少，不是图中标出的a。...2判断垂直滚动条是否到达底部弄明白了以上的概念，编码其实就比较简单了，以下是示例代码： <!...程序中，在外部div的scroll（滚动）事件中侦测和执行if判断语句，是非常消耗CPU资源的。用鼠标拖拉滚动条，只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多。

2.3K2 0

JQuery Div scrollTop ScrollHeight

其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。...实际上，在js代码里，滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”（b），而是表示滚动条需要滚动的高度，即内部div的高度750px。...2判断垂直滚动条是否到达底部弄明白了以上的概念，编码其实就比较简单了，以下是示例代码：代码解说：内部div高度为750，外部div高度为500，所以垂直滚动条需要滚动750-500=250的距离，就会到达底部，参见语句nScrollTop +...程序中，在外部div的scroll（滚动）事件中侦测和执行if判断语句，是非常消耗CPU资源的。用鼠标拖拉滚动条，只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多。

2.7K1 0

手把手教你实现前端惰性加载

我们可以在浏览器滚动到一定的位置的时候进行下载，这也就是们通常所说的惰性加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。...2、可以设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。 3、可以在计算的时候，增加偏移数据，提前加载图片，并使用淡入效果，提高流畅性。...这种条件下，假设 bound=el.getBoundingClientRect()，随着滚动条的向下滚动，bound.top会越来越小，也就是图片到可视区域顶部的距离越来越小，当 bound.top==...举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。 isIntersecting，返回一个布尔值, 如果目标元素与交叉区域观察者对象的根相交，则返回 true 。...实现下拉无限滚动：在页面底部有一个loading状态标签。一旦标签可见，就表示用户到达了页面底部，从而加载新的条目放在标签的前面。

9521 0

造一个 react-infinite-scroller 轮子

offset 公式无限滚动的原理很简单：只要很长元素总高度 - 窗口距离顶部高度 - 窗口高度 < 阈值就加载更多，前面那一堆下称为 offset，表示还剩多少 px 到达底部。...相当于上面的 “很长元素总高度” scrollTop: 可以获取或设置一个元素的内容垂直滚动的像素数。...相当于上面的 “窗口高度” 总结一下，上面公式里的 offset 表示距离底部的 px 值，只要 offset < threshold 说明滚动到了底部，开始 loadMore()。...这里的两个监听器都可以设置 passive: true 来提高滚动性能，不过我们第一步是要检测当前浏览器是否支持被动监听器。...) 其中 calculateTopPosition 为递归地计算元素顶部到浏览器窗口顶部的距离 window 向上滚动：window.pageYOffset || doc.scrollTop 其中 doc

2.6K3 0

Scroll，你玩明白了嘛？

同时，为了实现平滑滚动，我们在滚动容器上设置了如下的 CSS： .scroll-ctn { display: block; width: 100%; height...3.2 应用自己以往需要用到滚动的场景有：组件初始化，定位到目标位置点击当前页靠底部的某个元素，触发滚动翻页 .........4、如何区分人为滚动和脚本滚动 4.1 背景最近遇到这么一个需求，做一个实时高亮当前播放内容的字幕文稿。...流程图如下：而这其中唯一需要关注的点在于，需要通过什么方式知道，脚本滚动结束了？ scrollTo 等原生方式，显然没有给我们提供回调方法，来告诉我们滚动在什么时候结束。... 方法，在其中分别编写人为滚动和脚本滚动的逻辑，并使用节流来避免频繁触发。

3.1K2 2

使用CSS实现底部固定广告Banner与自适应内容区域

本篇文章将详细介绍如何使用纯CSS（不依赖JavaScript）来实现一个高度自适应的页面内容区域和一个始终固定在页面底部的广告Banner，同时确保两者不会重叠。...需求分析底部广告Banner：固定在页面底部，高度未知。页面内容区域：占据除广告Banner外的所有空间，支持滚动，高度自适应。无重叠：两个区域之间不能有任何重叠。...然而，position: sticky;在这里并不适用，因为它依赖于滚动行为，而我们希望Banner即使在页面不滚动时也固定在底部。...--> 底部组件一些底部的信息......结论通过上述方法，我们可以实现一个高度自适应的页面内容区域和一个始终固定在页面底部的广告Banner，同时确保两者不会重叠。

1451 0

详细设计一个文章页目录插件

所以需要做的就是在一个划定的区域内滚动目录，超出该区域的目录子项将会自动隐藏。通过滚动目录，我们可以实现目录列表的头尾两个目录子项都能很好的在划定区域里显示出来。...随着页面的滚动，目录将从头滚到尾，那么滚动的范围是从第一个子目录贴着滚动区域的顶部到最后一个子目录贴着滚动区域的底部为止；当页面在最顶部的时候，当前高亮的子目录肯定是第一个，随着页面的向下滚动，高亮的位置也在不断下移...，如上面的图 ③ 到图 ④ 的变化过程；如果这个高度差过于大，使得滚动后最后一个子元素不能贴着滚动区域底部的时候，则不按照这个高度差进行滚动，而真实需要滚动的距离是最后一个子目录到滚动区域底部的距离，...> 其中，arCatalog-line 表示目录条，arCatalog-body 是滚动区域，dl 是滚动列表，dd 是目录子项，arCatalog-index 是目录序号，链接里放的是子目录标题...，即中位线以下，此时目录的滚动距离将是滚动后高亮子目录的底部位置到中位线的高度差，如上图 ②；滚动后的高亮目录处于中位线以下且最后一个子目录需要贴着滚动区域底部，此时目录的滚动距离将是滚动列表底部到滚动区域底部的高度差

2.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭