文档建议反馈控制台
首页
学习
活动
专区
工具
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会显示出来。你可以根据实际需求修改div1和div2的样式和内容。

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

相关搜索:如何在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
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

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

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

5.1K30

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

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

2K10

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

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

    2.9K20

    小智在这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设置为屏幕高度而没有显示地址栏， 因此屏幕底部被切断。...在上图中，应该在屏幕底部的按钮被隐藏了。 更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部， 因此用户体验是很糟糕的。

    68221

    vue 虚拟列表的实现

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

    20210

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

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

    5.5K20

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

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

    10.4K74

    scrollWidth,clientWidth,offsetWidth的区别

    offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...当一行内容超出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。 scrollWidth是对象实际内容的宽度。...:silver; position:absolute; top:-5px;”>测试top 上面是一个段落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请求获取页面数据时直接得到的图片,而是先得到： 也就是说只是得到这么一个记录图片位置的字符串，然后把数据赋值给： <img src="https://img.pic88...//<em>屏幕</em><em>的</em>高度 也就是<em>当</em>元素到<em>屏幕</em>顶部<em>的</em>距离小于<em>屏幕</em>高度<em>时</em>，就可以判定图片进入了<em>屏幕</em>。...然而，随着互联网<em>的</em>发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测： 1，图片懒加载——<em>当</em>图片<em>滚动</em>到可见<em>时</em>才进行加载 2，内容无限<em>滚动</em>——也就是用户<em>滚动</em>到接近内容底部<em>时</em>直接加载更多，而无需用户操作翻页

    1.7K30

    像素的一生

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

    1.5K20

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

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

    75850

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

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

    11.8K30

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

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

    1.3K60

    移动端轮播图笔记

    触屏事件可以相应用户手指对屏幕或者触控板操作 常见的触屏事件： 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

    实现图片懒加载

    实现图片懒加载 图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗...id="container"> <!...var imgUnitContainer = document.createElement("div"); // 图片外层div 主要为统一图片尺寸 imgUnitContainer.className...yes") return ; // 如果已经加载完成 便不再重复加载 if((height + scrollTop) > v.offsetTop){ // 如果已经出现在屏幕内...{ // 缓存img加载完成事件 v.src = v.getAttribute("data-src"); // 缓存img加载完成后将真实url赋值文档显示的图片节点

    1.2K20

    「译」前端项目中常见的 CSS 问题

    添加 flex-wrap 要想让一个元素表现得像弹性容器那样，只需添加 display: flex。但是，如果没有添加 flex-wrap ，那么当屏幕尺寸缩小的时候，将会出现水平滚动条。...在移动端下，浏览器将会出现水平滚动条。 image.png 左边：出现水平滚动条，并且项目没有换行。右边：项目换行，呈两行显示 解决方法很简单。wrapper 应该在空间不足时让项目换行。...长词和链接 在手机屏幕上浏览文章的时候，一个长词或者内联链接可能会导致页面出现水平滚动条。使用 CSS 的 word-break 可以防止这个问题。...Sara Soueidan 写了一篇不错的文章讨论过这个问题。 8. 当视窗高度不足时将元素固定在屏幕顶部 如果你在视窗不够高的时候将一个元素固定在屏幕顶部，会发生什么事呢？...为图片设置 max-width 添加图片时，定义 max-width: 100%，这样图片会在屏幕较小的时候改变大小。否则浏览器将会显示水平滚动条。

    2.1K10

    纯css实现纵向滚动固定表头与横向内容滚动

    这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动 ?...image.png 最基础的思路就是表头和内容是用两个表格来显示（图来自https://zhuanlan.zhihu.com/p/33280304），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了...image.png 纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置overflow-y:auto就实现纵向滚动了。 但横向滚动呢？...: auto; } .content-container { overflow-y: auto; } 虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。...最后突然想到一个position的新属性，sticky 设置了position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时

    5.2K00
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券