首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当一个div滚动出屏幕时,显示另一个div。得到不需要的闪光灯

当一个div滚动出屏幕时,显示另一个div的效果可以通过监听滚动事件来实现。具体步骤如下:

  1. 首先,给需要滚动的div添加一个滚动事件监听器。
  2. 在滚动事件的回调函数中,判断当前div是否已经滚动出屏幕。
  3. 如果div已经滚动出屏幕,则显示另一个div,可以通过修改另一个div的CSS属性来实现显示效果。
  4. 如果div还在屏幕内,则隐藏另一个div,同样可以通过修改CSS属性来实现隐藏效果。

以下是一个示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <style>
    #div1 {
      height: 500px;
      width: 100%;
      background-color: #f1f1f1;
      overflow-y: scroll;
    }
    
    #div2 {
      height: 200px;
      width: 100%;
      background-color: #ccc;
      display: none;
    }
  </style>
</head>
<body>
  <div id="div1" onscroll="checkScroll()">
    <p>Scroll down to see the effect</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi. Sed id semper mauris. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi. Sed id semper mauris. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi. Sed id semper mauris. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi.</p>
  </div>
  
  <div id="div2">
    <p>This is the div to be shown when the other div is scrolled out of the screen.</p>
  </div>

  <script>
    function checkScroll() {
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");

      var rect = div1.getBoundingClientRect();
      if (rect.bottom <= 0 || rect.top >= window.innerHeight) {
        div2.style.display = "block";
      } else {
        div2.style.display = "none";
      }
    }
  </script>
</body>
</html>

在上述示例代码中,当div1滚动出屏幕时,div2会显示出来。你可以根据实际需求修改div1div2的样式和内容。

请注意,以上示例代码中没有提及任何特定的云计算品牌商或产品,因为这个问题与云计算领域的专业知识没有直接关联。

相关搜索:如何在DOM中滚动出另一个div时显示div当达到另一个div的50%高度时,Jquery显示div如何在@media屏幕中滚动div时在@media print中显示div的内容jquery -当另一个具有某个类时显示div当一个div悬停时更改另一个div的文本颜色绝对定位的div不会滚动;当其他内容滚动时,它会固定在屏幕上当另一个Div经过某个Div时,渐进式更改该Div中的文本Div元素宽度:当另一个div不在屏幕上时,实际上不是100% (position:绝对)滚动位于另一个div内的窗口时将div放在视图中当悬停的div位于另一个div内时,悬停不起作用仅当元素在屏幕上不可见时才滚动到可滚动div中的元素当一个div与另一个div对接并且没有堆叠在它上面时,要包装的一个div当您将鼠标移到另一个div中的另一个元素上时,如何更改div样式?在一个div显示的悬停事件上,另一个div以及另一个div也应该在其悬停时保持显示当特定文本显示在另一个div中时,替换div中的文本的jQuery (动态更新的购物定价变体)当DIV的第一个实例有时上面出现另一个div时,我如何隐藏它?如何将一个固定的Div显示在另一个Div后面的底部,像视差一样滚动显示有没有办法让一个div推送/移动另一个div,当它在悬停时展开/移动/显示时只使用HTML & CSS?如何使用CSS和Jquery在显示另一个可变宽度的div时将div滑过?CSS解决方案,用于仅当另一个div不在视图中或超过一定数量的px时才显示div
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

RenderingNG中关键数据结构及其角色

当视口大小改变时 这个过程「不是即时」的,所以复制的视觉属性也包括一个同步令牌sync token。...❝显示项大致对应于CSS绘制顺序规范的「原子步骤」 ❞ 「一个DOM元素可能导致多个显示项」,例如#green有一个背景显示项和另一个内联文本显示项。...例如,当滚动一个网站时,现有瓦片的位置会向上移动,只是需要为更远的页面内容栅格化一个新瓦片。 上面的图片有四张「瓦片」。当滚动发生时,「第五块」瓦片开始出现。...另一个例子是存在「站点隔离」的多个iframe之间。这种嵌入是表面Surface通过完成的。 当一个合成器提交一个合成器帧时,它伴随着一个用于区分合成帧的标识符,即「表面ID」。...这也是一个优化不必要的中间纹理或屏幕外内容的机会。例如,在很多情况下,一个独立网站的iframe的合成器帧不需要它自己的中间纹理,可以通过绘制quad直接绘制到框架缓冲区。

2K10

前端-原生JS实现最简单的图片懒加载

懒加载 ---- 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源...随着滚动条的向下滚动, bound.top会越来越小,也就是图片到可视区域顶部的距离越来越小,当 bound.top===clientHeight时,图片的上沿应该是位于可视区域下沿的位置的临界点,再滚动一点点...index,当滚动条滚动时就不需要遍历所有的图片,只需要遍历未加载的图片即可。...第一张图片是完整的呈现了,第二张图片刚进入可视区域,后面的就看不到了~ 页面滚动时 当我向下滚动,此时浏览器是这样 ? 此时第二张图片完全显示了,而第三张图片显示了一点点,这时候我们看看请求情况 ?...img3的请求发出来,而后面的请求还是没发出~ 全部载入时 当滚动条滚到最底下时,全部请求都应该是发出的,如图 ?

5.1K30
  • 原生 JS 实现最简单的图片懒加载

    懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化可方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源...随着滚动条的向下滚动, bound.top会越来越小,也就是图片到可视区域顶部的距离越来越小,当 bound.top===clientHeight时,图片的上沿应该是位于可视区域下沿的位置的临界点,再滚动一点点...,当滚动条滚动时就不需要遍历所有的图片,只需要遍历未加载的图片即可。...函数节流 在类似于滚动条滚动等频繁的DOM操作时,总会提到“函数节流、函数去抖”。 所谓的函数节流,也就是让一个函数不要执行的太频繁,减少一些过快的调用来节流。...,此时浏览器是这样 此时第二张图片完全显示了,而第三张图片显示了一点点,这时候我们看看请求情况 img3的请求发出来,而后面的请求还是没发出~ 全部载入时 当滚动条滚到最底下时,全部请求都应该是发出的

    3K20

    小智在这3年开发中遇到的 CSS 问题及解决方案,有大佬帮他总结好了 !

    这是因为无论内容如何,scroll-y都会显示滚动条,这时候我们可以使用overflow: auto,它只会在需要时显示滚动条。 ?...在移动设备上,浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap,这样当水平空间不够时,浏览器会帮我们自动换行。...长单词和链接 当在移动屏幕上阅读一篇文章时,一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...当视口不够高时将元素固定在屏幕顶部 如果将元素固定在屏幕顶部,如果视口不够高会发生什么情况?很简单:它会占用屏幕空间,因此,用户浏览网站时可用的垂直区域就会变小,这会影响用户的体验。...否则,浏览器将显示一个水平滚动条。 img { max-width: 100%; } 10.

    3.7K10

    CSS | 视差滚动 | 笔记

    scroll 背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。 对父元素 css_demo 设置 overflow: scroll, 当元素内容超出页面时滚动。...当perspective属性用在容器内每个元素身上时,会根据各自的设置值进行表现。 打个比方就是你一个人平视盒子里的10个鸡蛋和十个你每人看1个一模一样鸡蛋。...当一个层的 translateZ 值为负时,它会向内移动,也就是朝向观察者的方向。 这样的移动会使层看起来更接近观察者,产生较强的视差效果。 在视差滚动中,这种效果可以让层看起来更大、更突出。...结果是,当地址栏可见时,屏幕的底部部分将被切断,从而破坏了100vh的初衷。 如下所示: 当地址栏可见时,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...在上图中,应该在屏幕底部的按钮被隐藏了。 更糟糕的是,当用户第一次使用手机访问网站时,地址栏会显示在页面顶部, 因此用户体验是很糟糕的。

    82021

    JavaScript 编程精解 中文第三版 十五、处理事件

    或pageX和pageY,它们相对于整个文档的左上角(当窗口被滚动时可能不同)。 下面的代码实现了简单的绘图程序。每次点击文档时,会在鼠标指针下添加一个点。...如果你点击你的屏幕,你会得到'mousedown','mouseup'和'click'事件。 但是这种错觉不是很健壮。...触摸屏与鼠标的工作方式不同:它没有多个按钮,当手指不在屏幕上时不能跟踪手指(来模拟"mousemove"),并且允许多个手指同时在屏幕上。...当手指开始触摸屏幕时,您会看到'touchstart'事件。 当它在触摸中移动时,触发"touchmove"事件。 最后,当它停止触摸屏幕时,您会看到"touchend"事件。...使用pageYOffset(当前滚动位置)除以最大滚动位置,并乘以 100,就可以得到进度条长度。 调用滚动事件的preventDefault无法阻止滚动。

    5.6K20

    vue 虚拟列表的实现

    Vue 虚拟列表的实现依赖于一些关键技术,包括虚拟滚动、缓存池和动态渲染。 虚拟滚动是 Vue 虚拟列表的核心技术之一。它通过仅在屏幕上显示可见部分的列表项,而不是整个列表来减少渲染所需的时间和资源。...虚拟滚动的实现涉及到计算列表项的高度或宽度,以及计算屏幕可见区域的高度或宽度。这些计算可以通过测量DOM元素的高度或宽度来完成。...缓存池是另一个关键技术,它可以在视图滚动时重用已经渲染的列表项,而不是重新渲染它们。这可以大大减少DOM 操作的数量,从而提高应用程序的响应速度和性能。...当用户滚动时,列表会动态地更新,以显示当前可见区域的列表项。在实现中,我们使用了一个计算属性 visibleItems 来计算当前视图中需要渲染的列表项,并使用 v-for 指令来动态地渲染它们。...我们还使用一个监听滚动事件的方法 onScroll 来更新可见区域的起始索引,从而更新视图中显示的列表项。 总之,Vue 虚拟列表是一种优化大型列表的渲染性能的技术。

    30810

    「前端进阶」高性能渲染十万条数据(虚拟列表)

    说完首次加载,再分析一下当滚动发生时,我们可以通过计算当前滚动值得知此时在屏幕 可见区域应该显示的列表项。...实现 虚拟列表的实现,实际上就是在首屏加载的时候,只加载 可视区域内需要的列表项,当滚动发生时,动态通过计算获得 可视区域内的列表项,并将 非可视区域内存在的列表项删除。...列表项动态高度 在之前的实现中,列表项的高度是固定的,因为高度固定,所以可以很轻易的获取列表项的整体高度以及滚动时的显示数据与对应的偏移量。...从演示效果上看,我们实现了基于 文字内容动态撑高列表项情况下的 虚拟列表,但是我们可能会发现,当滚动过快时,会出现短暂的 白屏现象。...为了使页面平滑滚动,我们还需要在 可见区域的上方和下方渲染额外的项目,在滚动时给予一些 缓冲,所以将屏幕分为三个区域: 可视区域上方: above 可视区域: screen 可视区域下方: below

    10.8K74

    scrollWidth,clientWidth,offsetWidth的区别

    offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。...当一行内容超出文本框的宽度,就有横向滚动条出来了,scrollWidth的值就变了。 scrollWidth是对象实际内容的宽度。...:silver; position:absolute; top:-5px;”>测试top div> 上面是一个段落P包含在一个DIV内,可以看到P的top设置为-5px后,它的上边距超过了容器...需要注意的是,DIV和P这一对包含元素,都需要设置position为absolute才能得到想要的结果,假如父元素不设置,则子元素的参照将是更上层定义过position的元素,直到整个文档; 2. posTop... container.scrollTop = 12; 这一段文本在这个100*100的DIV内无法完全显示,所以设置了overflow为auto,它会出现一个上下方向的滑动框

    2.2K20

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

    ❞ 两个效果 翻盖效果 一个是屏幕慢慢打开的效果,在屏幕打开的过程中,「电脑图片」 是在屏幕中固定不动的,直到打开完毕或者关闭完毕的时候再让 「电脑图片」 随着滚动条滚动。 ?...缩放图片 开始时是一张全屏的图片,在滚动过程中慢慢变成另一张图片,接着这张图片以屏幕正中间为基准点慢慢缩小,在缩小的过程中,这张图是定在屏幕中央的,缩小到一定值的时候,图片随着滚动条滚动。 ?...❞ 缩放图片 缩放图片到屏幕这个动画我们可以用两个方式实现,一个是 「滚动视差」 实现,一个是 canvas 在滚动过程中实时渲染图片。 开始之前我们来看一下没有放大的之前图,如下: ?...它由两张图片组成,屏幕中显示的图片,他与 电脑外壳 的上间距是 18px,当放大了之后,图片与电脑外壳图片 的上边距应该是 18 * 放大比率。 电脑外壳图片,如下: ?...Canvas 实现 Canvas 实现是将屏幕中显示的这张图片由 Canvas 来画。 思路 其实这个动画有两部分组成,一个是 「图片覆盖」,一个是 「图片缩小」。

    1.9K60

    图片懒加载原理及实现(java懒加载原理)

    一,前置知识 1,为什么要图片懒加载 懒加载是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资源...如下图: 随着滚轮滚动,底部的图片会被不断地加载,从而显示在页面上,也就是说懒加载其实就是按需加载,当页面需要显示图片的时候才进行加载,否则不加载。...也就是说,它不是页面加载时发起http请求获取页面数据时直接得到的图片,而是先得到: 也就是说只是得到这么一个记录图片位置的字符串,然后把数据赋值给: 屏幕的高度 也就是当元素到屏幕顶部的距离小于屏幕高度时,就可以判定图片进入了屏幕。...然而,随着互联网的发展,这种需求却与日俱增,比如,下面这些情况都需要用到相交检测: 1,图片懒加载——当图片滚动到可见时才进行加载 2,内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多,而无需用户操作翻页

    1.8K30

    像素的一生

    [文字排列.png] 布局可以计算单个元素的多种边界矩形。例如,当存在溢出时,Layout将同时计算边界框和布局溢出。如果节点的溢出是可滚动的,Layout还会计算滚动边界并为滚动条预留空间。...[image.png] 实例 大家且看这段代码会渲染出什么效果 div style="max-width: 100px"> div style="float: left; padding: 1ex...、轮廓等 [image.png] 正确的绘制顺序非常重要,这样当元素重叠时,它们才能正确堆叠。...一个元素甚至可能部分位于另一个元素的前面,部分位于另一个元素的后面。这是因为绘制在多个阶段中运行,每个绘制阶段都对自己的子树进行遍历。...即在paint阶段只需要paint的信息,而不需要知道层的任何信息,因为这时层还没有构建 [CAP.png] 在过去,变换、裁剪、效果滚动等信息等存储在层本身上,但CAP要求层的属性解耦。

    1.6K20

    给我2分钟,保证教会你在Vue3中实现一个定高的虚拟列表

    只要有个item在可视区域漏了一点出来,我们也应该将其渲染。 此时我们就能得到几个变量: start:可视区域内渲染的第一个item的index的值,初始化为0。...此时可视区域内显示的就是item1-item7的模块了,这就是为什么前面我们计算end时要多渲染一个item,不然这里item7就没法显示了。...滚动距离在0-100之间时,渲染的DOM没有变化,我们完全是复用浏览器的滚动,并没有进行任何处理。 当scrollTop的值为100时,也就是刚刚把item1滚到可视区外面时。...然后根据滚动的距离去计算start的位置,计算end的位置时使用start + renderCount预渲染一个item。在每个item范围内滚动时直接复用浏览器的滚动,此时无需进行任何处理。...当从一个item滚动到另外一个item时,此时会做两件事情:更新start的值和根据scrollTop计算列表的偏移值让新的start对应的item重新回到可视范围内。

    16801

    【前端转鸿蒙必看篇】:ArkUI的布局

    当组件内容和组件内容区大小不一致时,align 属性生效,定义组件内容在组件内容区的对齐方式,如居中对齐。...栅格不同于网格布局固定的空间划分,可以实现不同设备下不同的布局,空间划分更随心所欲,从而显著降低适配不同屏幕尺寸的设计及开发成本,使得整体设计和开发流程更有秩序和节奏感,同时也保证多设备上应用显示的协调性和一致性...列表(List)使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中,列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力,超出屏幕时可以滚动。...前端层面其实这已经不算一个布局概念了,通常我们前端可以使用基础的 div 加一些 css+js 来实现轮播效果,但是对于 ArkUI 来直接提供了 Swiper选项卡(Tabs)选项卡可以在一个页面内快速实现视图内容的切换...前端层面其实这已经不算一个布局概念了,通常我们前端可以使用基础的 div 加一些 css+js 来实现轮播效果,但是对于 ArkUI 来直接提供了 Tabs写在最后如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙

    21520

    《从案例中学习JavaScript》之实现网页版阅读器

    Paste_Image.png 当我滚动条往上滚动的时候,屏幕右下角会出现一个向上的箭头: ? Paste_Image.png 而往下滚动的时候,又自动消失。...Paste_Image.png 这样一来,一个手机的大概模子就出来了,接下来,我们把屏幕区域加上去。...这座持续飘浮在空中、吞噬了将近六千人,充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖,浅浅地划过我的肩膀。...这座持续飘浮在空中、吞噬了将近六千人,充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖,浅浅地划过我的肩膀。...123.gif 最后,我们还希望实现的一个效果就是,只有在滚动条往上拖动的时候,才把按钮显示出来,否则就隐藏该按钮。毕竟,我们在阅读的时候都不希望一直有个小图标吧。

    1.3K60

    Vue2.0 歌手列表滚动及右侧快速入口实现

    $refs.listGroup[index], 0) } } } 3 右侧快速入口_滑动滚动 当我们的手指在右侧快速入口上滑动时,歌手列表也会同步进行滚动,当我们滚动右侧快速入口时...} }, components: { Scroll } } 4 右侧快速入口_高亮设置 当歌手列表滚动时...,我们想要在右侧快速入口中,高亮当前显示的title,这就需要我们监听scroll组件的滚动事件,来获取当前滚动的位置 // scroll.vue <script type="text/ecmascript...components: { Scroll } } 5 滚动固定标题 当我们滚动歌手列表页时,希望该歌手的title一直显示在顶部...,并且滚动到下一个title时,新的title将旧的title顶替掉,这里就需要我们计算一个title的高度 // listview.vue <scroll class=

    77150

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

    ,当我们要设置一个固定在顶部的菜单、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding,当我们要设置一个固定在底部的菜单...navigationPosition: right, // //鼠标移动到小圆点上时显示出的提示信息 // navigationTooltips: ["第一页","第二页","第三页..."], // //是否显示当前页面小圆点导航的提示信息,不需要鼠标移上 // showActiveTooltip: true, // //是否显示横向幻灯片的导航 //...,但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部的padding,当我们要设置一个固定在顶部的菜单、导航、元素等时使用...navigationPosition: right, // //鼠标移动到小圆点上时显示出的提示信息 // navigationTooltips: ["第一页","第二页","第三页

    11.9K30

    移动端轮播图笔记

    触屏事件可以相应用户手指对屏幕或者触控板操作 常见的触屏事件: 1.touchstart:手指触摸到一个DOM元素时触发 2.touchmove:手指在一个DOM元素上滑动时触发 3.touchend:...手指从一个DOM元素上移开时触发 1.2触摸事件对象(TochEvent) TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...1.touches:正在触摸屏幕的所有手指的一个列表 2.targetTouches:正在触摸当前DOM元素上的手指的一个列表(最常使用) 3.changeTouches:手指状态发生了改变的列表,从无到有...(2)移动手指touchmove:计算手指的滑动距离,并且移动盒子 (3)离开手指touchend 注意:手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault...1.不允许网页出现横向滚动条 2.页面盛满屏幕,盒子宽度与屏幕一致 100% 3.让盒子的内容宽高width/height包含padding

    2.5K21

    jQuery 教程:简单的遮罩弹窗效果

    遮罩弹出效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见,例如:QQ空间浏览相册等。这种效果的好处就是,可以让用户聚焦到弹出的菜单中。...遮罩用到了两个 div ,一个作为背景,要覆盖整个网页,另一个是内容显示层,通常要居中处理。...通常情况下,一般用 absolute 属性值来实现这种效果,因为它的兼容性更好。但是在实际应用当中,当页面很长,往下滚动的时候,使用 absolute 遮罩层也会跟随滚动。...更多技巧和方法 更平缓的显示 点击之后,突然出现并不是一个好方法。所以我又增加了一个按钮,点击之后通过 fadeIn、fadeOut 方法来控制渐隐。...通常的做法是这样的:用 Javascript 获取整个网页的高度、宽度,赋值给遮罩层,这样即使打开遮罩滚动网页,也不会出现没有遮罩的地方。

    1.6K20
    领券