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

如何在使用vh滚动时再次显示div?

在使用vh(视口高度)滚动时再次显示div,可以通过监听滚动事件并计算滚动距离来实现。

首先,需要给滚动容器添加一个滚动事件监听器,可以使用JavaScript的addEventListener方法来实现。在滚动事件的回调函数中,可以获取滚动距离,并根据需要的条件来判断何时显示div。

以下是一个示例代码:

代码语言:txt
复制
// 获取滚动容器元素
var container = document.getElementById('scroll-container');
// 获取需要显示的div元素
var divToShow = document.getElementById('div-to-show');

// 添加滚动事件监听器
container.addEventListener('scroll', function() {
  // 获取滚动距离
  var scrollDistance = container.scrollTop;

  // 判断滚动距离是否满足条件
  if (scrollDistance >= window.innerHeight) {
    // 显示div
    divToShow.style.display = 'block';
  } else {
    // 隐藏div
    divToShow.style.display = 'none';
  }
});

在上述代码中,我们首先获取了滚动容器元素和需要显示的div元素。然后,通过addEventListener方法给滚动容器添加了一个scroll事件监听器。在滚动事件的回调函数中,我们获取了滚动距离,并根据滚动距离是否大于等于视口高度来判断是否显示div。如果满足条件,则将div的display属性设置为'block',否则设置为'none'来隐藏div。

需要注意的是,上述代码中的滚动容器元素和需要显示的div元素的id属性需要根据实际情况进行修改。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。

  • 腾讯云云服务器(CVM):提供可扩展的计算容量,可根据业务需求弹性调整配置,支持多种操作系统和应用场景。产品介绍链接地址:腾讯云云服务器
  • 腾讯云云函数(SCF):无需管理服务器,按需运行代码,实现事件驱动的无服务器架构,适用于处理后端逻辑、数据处理、定时任务等场景。产品介绍链接地址:腾讯云云函数

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和情况进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

滚动视差让你不相信“眼见为实”

本文主要是简单的介绍一下什么是视差滚动,实现方式以及如何在现有框架(vue/react)中使用视差滚动。 什么是视差滚动? 视差效果, 最初是一个天文术语。...当我们看着繁星点点的天空时,较远的恒星运动较慢,而较近的恒星运动较快。当我们坐在车里看着窗外时,我们会有相同的感觉。远处的山脉似乎没有动,附近的稻田很快过去了。许多游戏使用视差效果来增加场景的三维度。...说的简单点就是,滚动屏幕时,网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同,导致网页中产生分层元素的错觉。 看完上面这段,相信你对视差滚动的概念已经有了一个初步的了解。...我们使用 background-attachment: fixed 来实现视差滚动,看一下示例: // html div class="a-text">1div> div class="a-img1...,下面让我们看下如何在现有框架(vue/react)中来应用滚动视差。

2.2K76

CSS | 视差滚动 | 笔记

子元素 word 随着页面滚动显示, 对子元素 bg 设置 background-attachment: fixed, 使其在当前视口固定。...结果是,当地址栏可见时,屏幕的底部部分将被切断,从而破坏了100vh的初衷。 如下所示: 当地址栏可见时,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...更糟糕的是,当用户第一次使用手机访问网站时,地址栏会显示在页面顶部, 因此用户体验是很糟糕的。...使用雪碧图的目的: 有时为了美观,我们会使用一张图片来代替一些小图标, 但是一个网页可能有很多很多的小图标, 浏览器在显示页面的时候,就需要像服务器发送很多次访问请求,这样一来, 一是造成资源浪费, 二是会导致访问速度变慢...这时候,把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开, 就解决了上述的两个问题。 显示雪碧图的条件: 1. 一个设置好宽和高的容器 2.

81521
  • 【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + Mo

    一、布局分析在上一章,我们已经搭建好了项目的基础框架并使用了vm作为移动端的适配方案,下一步,我们开始设计布局,打开肯德基点餐小程序,分析这个页面的布局。...,展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项,是菜单标签页里的内容。...} }}显示如下:2.3、Header 标题栏标题栏主体内容主要分为4部分进行设计,我们首先设计了一个滚动通知,利用swipe组件完成,然后左侧一个图标、一个餐厅主名字(名字后面接一个可切换餐厅地点的图标...)和餐厅描述,切换餐厅时弹出popup组件用以选择,通过一个show组件进行绑定,弹出层的内容和这里的其他细节我们后面继续设计,这里给出一个大致的框架,供大家参考学习和扩展(如还可以扩展读取地理信息计算距离...; font-size: 1.5vh; line-height: 3vh; border-bottom: 1px solid #e4e4e4; background-color: white;

    16010

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

    div 实现,外部的 div 提供底色背景,内部 div 显示阅读进度 div class="read_pro"> div class="read_pro_inner">div> 滚动条滚动到底部时,浏览器此时仍显示一屏内容,此时滚动条无法再滚动,scrollTop 无法再增加,因此 scrollTop 的最大值是 scrollHeight- clientHeight ,如果使用...js 实现需要监听 scroll 事件,而且滚动时有可能是频繁的 scroll 事件触发,有可能会造成一定的性能浪费,所以我们来一起学习 css 实现方案 使用CSS实现阅读进度 使用 CSS 实现阅读进度的方法很有意思...scrollPro.gif最后处理最后一屏的问题,保证滚动条滚动至底部时,阅读进度到达 100% scrollBottom.png这里如果没能理解原理,不用急,后面我会更详细的演示 @supports...实现原理 上面讲解 linear-height 时,我们提出了一种实现方案: 使用一块白块遮住蓝块,只留一条缝在顶部,显示的蓝条长度就是阅读进度 光说不难假把式,为了方便大家理解原理,我们使用一个案例来模拟一下

    74430

    视差滚动效果实现

    3D 变换效果,通过将元素划分至不同的纵深层级,在滚动时相对视口不同距离的元素,滚动所产生的位移在视觉上就会呈现越近的元素滚动速度越快,相反越远的元素滚动速度就越慢。...对于较远的层(如背景层),使用 scale() 进行放大,以补偿由于距离产生的视觉缩小效果。 当用户滚动页面时,由于各层位于不同的 Z 轴位置,它们会以不同的速度移动,从而产生视差效果。...style={{ ...style, transform }}>{children}div>; }; 在此基础上你可以添加缓动函数使动画效果更加平滑;以及使用requestAnimationFrame...它只在浏览器准备好进行下一次重绘时才会执行,避免了不必要的计算和重绘。...适应显示器刷新率:requestAnimationFrame 会自动适应显示器的刷新率。这意味着在 60Hz、120Hz 或其他刷新率的显示器上,动画都能保持流畑。

    20720

    网站自适应布局为什么我要抛弃rem,改用vw?

    当页面中所有元素都使用rem单位时,你只需要改变根元素font-size值,所有元素就会按比例放大或者缩小。... vw($px) {     @return ($px / 750) * 100vw; } //假设一个div元素在视觉稿中,宽度为120px,字体大小为12px div {     width: vw...100vw包括了页面滚动条宽度(页面滚动条属于viewport范围内,100vw当然包括了页面滚动条宽度)。但把body或者html设置为width:100%时,是不包括页面滚动条的宽度的。...那么就会引发一个问题:pc端使用vw单位时,如果页面内容超出一屏长度,出现了纵向滚动条,同时有元素width:100vw, 则会导致出现条横向滚动条,因为元素(100vw + 滚动条宽度)超出了viewport...总结 目前ios8、安卓4.4以下的用户已经非常少了,caniuse上面显示,在中国这部分用户只有1.2%,比例已经非常低了,而这部分用户的手机估计只会打打电话不会使用互联网的(还是需根据各自产品的用户数据分析来决定是否使用

    3.5K10

    【干货】使用 CSS Scroll Snap 优化滚动,提升用户体验!

    滚动容器的基础知识 要创建一个滚动容器,以下是我们需要做的基本内容 使用 overflow 一种将项目彼此相邻显示(内联)的方法 举个例子: div class="section"> div class...接着,我们来看看如何使用CSS scroll snap。 CSS Scroll Snap 简介 要在容器上使用scroll snap,它的子项目应该内联显示,这可以用我上面解释的方法之一来实现。...这意味着,滚动必须对齐到滚动容器的开始处。 在下图中,每次用户向右滚动时,浏览器都会将项目捕捉到容器的开头。...image.png 使用 Scroll-Snap-Stop 有时,我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项。...请注意,当用户再次向右滚动时,.item-3会捕捉到滚动容器的开头,这意味着仅具有边距的元素将受到影响。

    2.1K30

    使用 CSS Scroll Snap 优化滚动,提升用户体验!

    滚动容器的基础知识 要创建一个滚动容器,以下是我们需要做的基本内容 使用 overflow 一种将项目彼此相邻显示(内联)的方法 举个例子: div class="section"> div class...接着,我们来看看如何使用CSS scroll snap。 CSS Scroll Snap 简介 要在容器上使用scroll snap,它的子项目应该内联显示,这可以用我上面解释的方法之一来实现。...这意味着,滚动必须对齐到滚动容器的开始处。 在下图中,每次用户向右滚动时,浏览器都会将项目捕捉到容器的开头。...使用 Scroll-Snap-Stop 有时,我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项。...请注意,当用户再次向右滚动时,.item-3会捕捉到滚动容器的开头,这意味着仅具有边距的元素将受到影响。

    2.9K41

    蒙层禁止页面滚动的方案

    当弹出蒙层时禁止蒙层下的页面滚动,也可以称为滚动穿透的问题,文中介绍了一些常用的解决方案。...实现 首先需要实现一个蒙层下滚动的效果示例,当我们点击弹窗按钮显示蒙层之后,再滚动鼠标的话能够看到蒙层下的页面依旧是能够滚动的。...,可以将其固定在视图中即position: fixed,这样它就无法滚动了,当蒙层关闭时再释放,当然还有一些细节要考虑,将页面固定视图后内容会回头最顶端,这里我们需要记录一下用来同步top值,这样就可以得到一个兼容移动端与...PC端的较为完善的方案了,当然对于浏览器的api兼容性是使用document.documentElement.scrollTop控制还是window.pageYOffset + window.scrollTo...在示例中为了演示弹窗时不会导致视图重置到最顶端,将弹窗按钮移动到了下方。 <!

    6.4K21

    【CSS】面试官问我视差滚动怎么实现?我懵了...

    scroll背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。对父元素css_demo设置overflow: scroll,当元素内容超出页面时滚动。...子元素word随着页面滚动显示,对子元素bg设置 background-attachment: fixed,使其在当前视口固定。...height: 100%; width: 100%; background: rgba(0, 0, 0, 0.1); color: #fff; line-height: 100vh...; text-align: center; font-size: 20vh;}2、transform:translate3D涉及到的CSS属性如下:transform 可以对元素进行变换...z>0 的三维元素比正常大,而 z时则比正常小,大小程度由该属性的值决定。元素涉及 3d 变换时,perspective 可以让我们眼睛看到 3d 立体效果,有空间感。

    19510

    【CSS——效果实现】动态的 Tab 栏(蓝桥杯真题-6180)【合集】

    简单来说,在页面未开始滚动时顶栏处在其原有的位置上,当页面向下滚动一定区域后,顶栏会跟随滚动固定在页面上方。 本题请实现一个顶栏固定的课程网站首页。...当用户向下滚动的高度没有超过标题栏(即 .heading 元素)的高度时,保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时,固定显示 Tab 栏在网页顶部。...position: sticky; top: 0px:使 Tab 栏在页面滚动时固定在顶部。 .buttons a 样式: 设置 Tab 栏中链接的样式,去除下划线,设置文字颜色和内边距等。...添加点击事件监听器: 使用 forEach 方法遍历所有的 Tab 栏链接,为每个链接添加点击事件监听器。 根据点击的链接索引,显示相应的面板,并隐藏其他面板。...页面滚动: 由于 Tab 栏的 position 属性设置为 sticky,当页面滚动时,Tab 栏会固定在页面顶部。 测试结果

    3600

    【CSS】面试官问我视差滚动怎么实现?我懵了...

    视差滚动 视差滚动是一种效果,能够使不同层次的元素以不同的速度进行滚动,从而产生了视觉上的深度感和动态效果。...scroll 背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。 对父元素css_demo设置overflow: scroll,当元素内容超出页面时滚动。...子元素word随着页面滚动显示,对子元素bg设置background-attachment: fixed,使其在当前视口固定。...; text-align: center; font-size: 20vh; } 实现效果如下: 2、transform:translate3D 涉及到的CSS属性如下...z>0 的三维元素比正常大,而 z时则比正常小,大小程度由该属性的值决定。元素涉及 3d 变换时,perspective可以让我们眼睛看到 3d 立体效果,有空间感。

    24120

    Amazing!巧用 CSS 视差实现酷炫交互动效

    关于使用 CSS 实现滚动视差效果,在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果,感兴趣的同学可以先看看这篇文章。...这里,会运用上这样一种纯 CSS 的视差技巧: 使用 transform: translate3d 实现滚动视差 这里利用的是 CSS 3D,实现滚动视差效果。...,效果如下: CodePen Demo -- CSS 3D parallax 很明显,当滚动滚动条时,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。...3D 的能力,但是由于使用的是滚动触发动画效果,并且有一定的从模糊到清晰的渐现效果,因此还是有一定的 JavaScript 代码。...效果如下: 在原效果中,还有一些使用 JavaScript 结合滚动距离控制的模糊的变化,这个,我们使用 backdrop-filter: blur() 也可以简单模拟。

    82140

    【Html.js——页面布局】水果摆盘(蓝桥杯真题-1767)【合集】

    (2)主体部分: div id="board">:定义一个容器,作为整个布局的基础。它具有sticky定位,使其在页面滚动时保持固定在顶部。...div id="pond">:表示池塘区域,包含青蛙元素。z - index: 20使其显示在背景之上。...每个荷叶内部包含一个div class="bg">,用于显示荷叶的背景,并通过style属性设置旋转和缩放效果。 2....#board样式: position: sticky;:设置粘性定位,使元素在滚动时保持固定在顶部。 top: 0;:将元素固定在顶部。...最终效果呈现: 页面加载时,#board容器固定在顶部,#pond和#background中的青蛙和荷叶元素按照设定的布局和样式显示,形成类似水果摆盘的效果。

    5400

    54个CSS重难点整理,12-24篇,进阶高薪必需要掌握的知识点

    ; img.offsetTop 是元素顶部距离文档顶部的高度(包括滚动条的距离); 内容达到显示区域的:img.offsetTop < window.innerHeight + document.body.scrollTop...vw: 相对于视窗的宽度,视窗宽度是 100vw; vh: 相对于视窗的高度,视窗高度是 100vh; vmin: vw 和 vh 中的较小值; vmax: vw 和 vh 中的较大值; vw 和百分比的区别是...减少使用 @import,建议使用 link,因为 link 在页面加载时一起加载,import 是页面加载完成之后再加载。...元素的位置在屏幕滚动时不会改变,⽐如回到顶部的按钮都是用的fixed固定定位 sticky 粘性定位,基于用户的滚动位置来定位。...而当页面滚动超出目标区域时,它以固定定位呈现,否则以相对定位呈现。

    1.3K10

    CSS3新特性应用之用户体验

    和vmin ie10 + 和现代浏览器都支持vmin,ie全部都不支持vmax vmin表示vh和vw中比较小的值 vmax表示vh和vw中比较大的值 1vmax表示1vh和1vm之间较大的值 ch和...ex ie9+和现代浏览器都支持,依据当前font-family的相对单位 ch:字符0的宽度 ex:小写字符x的高度 当页面有滚动条时,遮罩层的边缘会露出来,除非用position:fixed定位,...但又防止页面本身就有滚动条 box-shadow不能产生交互事件(独立元素的遮罩层),只能在视觉上带来引导 box-shadow只限于没有滚动条 + 只做引导层的场景。...both时,会在右下角有一个可改提示,其他没有。.../img/cat.png" alt=""> div> 利用h5的range标签实现,需要Js的配合,使用其oninput事件监听range组件改变的值。

    84580

    postcss-px-to-viewport之vw、vh、rem

    vw 和 vh 中最大的那个 这边需要注意的是,vw是视口宽度,是连滚动条都算在内的: div style="width: 100vw;height: 20vh;background: #9dff00...">div> div style="width: 100%;height: 20vh;background: #005eff">div> div style="width: 100vw;height...: 80vh;background: #a6a9af">div> 我把视口宽度拉到1000,因为出现滚动条,100vw的宽度是1000px,宽度是100%的则是983px。...所以,用vw、vh的时候,注意要宽度百分百的时候,设置100%,否则底部会出现滚动条。当然,如果是移动端就没关系,移动端的滚动条是滑动的时候才出现,所以移动端的视口宽度就是百分百。...取的是vw和vh最大最小计算。 先使用rem,之前用的是淘宝的flexible.js,会帮你动态的根据屏幕大小计算html的font-size。

    1.7K30

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

    缩放图片 开始时是一张全屏的图片,在滚动过程中慢慢变成另一张图片,接着这张图片以屏幕正中间为基准点慢慢缩小,在缩小的过程中,这张图是定在屏幕中央的,缩小到一定值的时候,图片随着滚动条滚动。 ?...❞ 常用例子 在业务中我们可能会遇到这样一种场景:即一个列表,列表中的数据需要根据时间显示,而且时间需要在滚动的时候固定在最顶部,这个时候我们就可以使用 sticky 来解决这个问题: ?...❞ Canvas 画图 其实第二个动画我们也可以使用 canvas 画图来实现,我们可以在一块画布中画出两张图片,根据滚动的距离,去显示两张图片在画布中的比例。...❞ 样式代码 .stickyContainer { height: 150vh; } .stickyWrapper { height: 100vh; position: sticky;...width: 100%; } 接着就是在滚动的过程中计算出当先需要显示的图片是那一张,我们上面提到:120 张图片,在 400px 的滚动距离中完成动画。

    1.9K60
    领券