首页
学习
活动
专区
工具
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 1 <div class="a-img1...,下面让我们看下如何在现有框架(vue/react)中来应用滚动视差。

2.1K76

CSS | 视差滚动 | 笔记

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

57321

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

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

68230

网站自适应布局为什么我要抛弃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%,比例已经非常低了,而这部分用户的手机估计只会打打电话不会使用互联网的(还是需根据各自产品的用户数据分析来决定是否使用

3K10

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

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

2K30

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

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

2.7K41

蒙层禁止页面滚动的方案

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

6.1K21

【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<0 则比正常小,大小程度由该属性的值决定。元素涉及 3d 变换,perspective 可以让我们眼睛看到 3d 立体效果,有空间感。

16510

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

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

19220

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

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

74540

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.2K10

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=""> 利用h5的range标签实现,需要Js的配合,使用其oninput事件监听range组件改变的值。

80880

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

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

1.9K60

css 文字自适应大小_div自适应窗口大小

/paintBug.html box的宽度设置为900px,wrap设置为100%(~~这个百分比是相对于viewport的);缩小浏览器窗口,当宽度小于900会出现滚动条,向右滚动,会发现蓝色部分并不是...重绘 s.fontSize = “14px”; // 再一次 回流+重绘 // 添加node,再一次 回流+重绘 关于重绘和回流 其他方案 1. css expression, 这个效率比较低,不推荐使用...(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将...vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。 vmin:vw和vh中较小的那个。 vmax:vw和vh中较大的那个。...高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀) ch:以节点所使用字体中的

3.2K20
领券