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

在100vh (overflow) div中滚动时添加/删除类

在100vh (overflow) div中滚动时添加/删除类是指在一个高度为100vh的div容器中进行滚动操作时,通过添加或删除类来改变元素的样式或行为。

这种操作通常用于实现一些特定的交互效果或动画效果。例如,当用户滚动到特定位置时,可以通过添加类来改变元素的背景颜色、字体样式或显示隐藏元素等。

在实现这个功能时,可以使用JavaScript来监听滚动事件,并根据滚动位置来判断是否需要添加或删除类。具体的实现方式可以使用addEventListener方法来监听scroll事件,然后在事件处理函数中使用条件语句判断滚动位置,并通过classList属性来添加或删除类。

以下是一个示例代码:

HTML:

代码语言:txt
复制
<div class="scroll-container">
  <!-- 内容 -->
</div>

CSS:

代码语言:txt
复制
.scroll-container {
  height: 100vh;
  overflow: auto;
}

.scroll-container.scrolled {
  /* 添加滚动时的样式 */
}

.scroll-container:not(.scrolled) {
  /* 删除滚动时的样式 */
}

JavaScript:

代码语言:txt
复制
var scrollContainer = document.querySelector('.scroll-container');

scrollContainer.addEventListener('scroll', function() {
  if (scrollContainer.scrollTop > 0) {
    scrollContainer.classList.add('scrolled');
  } else {
    scrollContainer.classList.remove('scrolled');
  }
});

在上述示例中,当滚动容器的scrollTop大于0时,会给滚动容器添加名为"scrolled"的类,从而改变其样式。当scrollTop等于0时,会从滚动容器中移除该类,恢复原始样式。

对于腾讯云相关产品和产品介绍链接地址,可以根据具体需求选择适合的产品,例如云服务器、对象存储、云数据库等。具体的产品选择和介绍可以参考腾讯云官方文档或咨询腾讯云的客服人员。

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

相关·内容

蒙层禁止页面滚动的方案

但是蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我们是不希望他进行滚动的,因此需要阻止这种行为。...body添加overflow: hidden;,关闭蒙层就移除这个样式,例如思否的登录弹窗、antd的Modal对话框就是这样的方式。...缺点是移动端的适配性差一些,部分安卓机型以及safari,无法阻止底部页面滚动,另外有些机型可能需要给根节点添加overflow: hidden;样式才有效果,此外由于实际上是将页面的内容给裁剪了...,所以设置这个样式的时候滚动条会消失,而移除样式的时候滚动条又会出现,所以视觉上是会有一定的闪烁现象的,当然也可以定制滚动条的样式,但滚动条样式就是另一个兼容性的问题了,还有同样是因为裁剪。...示例为了演示弹窗不会导致视图重置到最顶端,将弹窗按钮移动到了下方。 <!

6.3K21

如何通过纯CSS实现网页的平滑滚动背景渐变效果

文章首先解释了背景渐变效果的实现原理,然后详细阐述了平滑滚动背景渐变效果的实现步骤,包括创建滚动容器、添加背景渐变效果以及添加滚动事件监听器等。...背景渐变效果实现原理 实现平滑滚动背景渐变效果前,我们先了解一下背景渐变的实现原理。CSS可以通过linear-gradient()函数实现背景渐变效果。...-- 网页内容 --> .container { height: 100vh; overflow-y: scroll; } 该容器使用vh单位设置高度为视口高度,并设置 overflow-y...添加滚动事件监听器。 通过JavaScript给容器添加滚动事件监听器,以便在滚动过程更新背景渐变的位置。...(scrollHeight - windowHeight)) * 100; container.style.backgroundPositionY = `${progress}%`; }); 滚动事件的回调函数

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

    你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。早期的前端开发,我依靠 JS 插件来创建滑块组件。...我们应该在哪里添加它们? 首先,我们需要将scroll-snap-type添加滚动容器我们的示例,是.section元素。...如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止临时点上。 mandatory关键字意味着浏览器必须捕捉到每个滚动点。假设roll-snap-align属性有一个start值。...image.png 使用 Scroll-Snap-Stop 有时,我们可能需要一种方法来防止用户滚动意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项。...向元素添加边距滚动将根据边距对齐。 参见下图: ? .item-2具有scroll-margin-left: 20px。 结果,滚动容器将在该项目之前对齐到20px。

    2.1K30

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

    你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。早期的前端开发,我依靠 JS 插件来创建滑块组件。...我们应该在哪里添加它们? 首先,我们需要将scroll-snap-type添加滚动容器我们的示例,是.section元素。...如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止临时点上。 mandatory关键字意味着浏览器必须捕捉到每个滚动点。假设roll-snap-align属性有一个start值。...使用 Scroll-Snap-Stop 有时,我们可能需要一种方法来防止用户滚动意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项。...向元素添加边距滚动将根据边距对齐。 参见下图: .item-2具有scroll-margin-left: 20px。 结果,滚动容器将在该项目之前对齐到20px。

    2.8K41

    CSS | 视差滚动 | 笔记

    scroll 背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。 对父元素 css_demo 设置 overflow: scroll, 当元素内容超出页面滚动。...perspective属性用来设置视点,css3的模型,视点是Z轴所在方向上的。...在这个示例,translateZ(-2px) 将 .layer2 层向内移动了 2 个像素单位。 通过视差滚动应用不同的 translateZ 值,可以创建层次感和深度效果。...视差滚动,"向内移动"和"向外移动"是相对于观察者(即浏览器窗口)的视角来说的。 当一个层的 translateZ 值为负,它会向内移动,也就是朝向观察者的方向。...视差滚动,这种效果可以让层看起来较小、较平面。

    73021

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

    关于使用 CSS 实现滚动视差效果,之前有一篇文章详细描述过具体方案 - CSS 实现视差效果,感兴趣的同学可以先看看这篇文章。...,效果如下: CodePen Demo -- CSS 3D parallax 很明显,当滚动滚动,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。...先来看第一个效果: 效果是一种文本交替不同高度的层展示,并且滚动的过程,会有明显的 3D 视差效果。...效果如下: 原效果,还有一些使用 JavaScript 结合滚动距离控制的模糊的变化,这个,我们使用 backdrop-filter: blur() 也可以简单模拟。...我们再简单添加一层 g-mask: <div class="

    79040

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

    引言 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果。 其实,这项技术早在 2013 年就已经开始一些国外的网站得到了大量的应用。...我是最近的项目中用到了这块,觉得有必要整理一下。本文主要是简单的介绍一下什么是视差滚动,实现方式以及如何在现有框架(vue/react)中使用视差滚动。 什么是视差滚动?...说的简单点就是,滚动屏幕,网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同,导致网页中产生分层元素的错觉。 看完上面这段,相信你对视差滚动的概念已经有了一个初步的了解。...background-attachment CSS 属性决定背景图像的位置是视口内固定,还是随着包含它的区块滚动。 它一共有三个属性: fixed: 键字表示背景相对于视口固定。...,下面让我们看下如何在现有框架(vue/react)来应用滚动视差。

    2.1K76

    【阿里开发手册】所有的都必须添加创建者和创建日期——Idea创建自动添加作者信息

    一、前言 阿里开发手册强制的建议——所有的都必须添加创建者和创建日期,我觉得很合适,自己写的过了几个月忘记,一看名字就知道是自己写的。出现问题,一看谁写,直接叫他解决bug很香啊!...二、阿里开发手册原话展示 ==【强制】== 所有的都必须添加创建者和创建日期。...说明:设置模板,注意 IDEA 的@author 为{USER},而 eclipse 的@author 为{user},大小写有区别,而日期的设置统一为 ==yyyy/MM/dd== 的格式。...正例: /** * @author yangguanbao * @date 2016/10/31 */ 三、IDEA设置模板 1. 打开设置 2....新建 四、总结 觉得阿里开发手册还是有很多地方挺好的,虽然进不了大厂,咱们开发规范跟着大厂走,总不会吃亏的。代码维护起来也轻松,你好他也好,哈哈哈哈!! ---- Q.E.D.

    6.3K30

    视差滚动效果实现

    CSS 中使用 3D 变换效果,通过将元素划分至不同的纵深层级,滚动相对视口不同距离的元素,滚动所产生的位移视觉上就会呈现越近的元素滚动速度越快,相反越远的元素滚动速度就越慢。...当用户滚动页面,由于各层位于不同的 Z 轴位置,它们会以不同的速度移动,从而产生视差效果。...如下是 React 实现示例,通过监听滚动事件,封装统一的视差组件,来达到多样的动画效果。...style={{ ...style, transform }}>{children}; }; 在此基础上你可以添加缓动函数使动画效果更加平滑;以及使用requestAnimationFrame...它只浏览器准备好进行下一次重绘才会执行,避免了不必要的计算和重绘。

    14720

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

    scroll背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。对父元素css_demo设置overflow: scroll,当元素内容超出页面滚动。...height: 100%; width: 100%; background: rgba(0, 0, 0, 0.1); color: #fff; line-height: 100vh...z>0 的三维元素比正常大,而 z<0 则比正常小,大小程度由该属性的值决定。元素涉及 3d 变换,perspective 可以让我们眼睛看到 3d 立体效果,有空间感。...transform-style 设置元素的子元素是位于 3D 空间中还是平面。...通过设置transform-style和 perspective,使该容器的子元素处在3D空间中,然后设置 transform: translateZ使物体滚动的时候Y轴移动位移不同,产生视觉差。

    18910

    转场动画一

    WeGame 的 PC 端官网首页,有着非常多制作精良的基于滚动的动画效果。 这里我简单截取其中 2 个比较有意思的转场动画,大家感受感受。...是不是挺有意思的,整个动画的衔接是基于滚轮的滚动触发的。我猜测是使用了类似 TweenMaxJS 的动画库实现。...其余的内容,简单解释下: 我们 LOGO 后面的图层,用 .g-bg 使用一张图片表示了场景 2 #g-scroll 用于基于滚动条的滚动,实现滚动动画 .g-wegame 里面就是上述使用 mask...离目标又近了一步,但是,仔细观察原效果,我们还少了一层: LOGO 渐隐的过程,背后的背景不是直接呈现的,而是有一个渐现的过程。...所以,完整而言,动画过程从,一共会有 4 层: 所以,完整的代码,大概是这样的: <div class="g-wrap

    61210

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

    scroll 背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。 对父元素css_demo设置overflow: scroll,当元素内容超出页面滚动。...height: 100%; width: 100%; background: rgba(0, 0, 0, 0.1); color: #fff; line-height: 100vh...z>0 的三维元素比正常大,而 z<0 则比正常小,大小程度由该属性的值决定。元素涉及 3d 变换,perspective可以让我们眼睛看到 3d 立体效果,有空间感。...transform-style 设置元素的子元素是位于 3D 空间中还是平面。...通过设置transform-style和 perspective,使该容器的子元素处在3D空间中,然后设置transform: translateZ使物体滚动的时候Y轴移动位移不同,产生视觉差。

    22120

    【CSS动效实战(纯CSS与JS动效)】02 flex 布局实战(仿 JD 及 gitCode 布局)及 media 自适应初探

    在此我们将头部看成是一个整体后,再往下看,我们可以将其看做是一个另一个整体,那么整个 flex 布局的方向就是 column,竖轴方向,那么此时我们 style 添加一个,直接名咩咩咩为 column...flex 方向为 column: 随后 body 之下添加对应的 div 表示头部,但是此时我们需要添加两个 div ,一个用于头部,另一个用于其主要内容区域...> 接着我们继续往下添加内容(如果觉得刚刚的压缩不明显,你可以添加内容去掉这个属性再观察): 这下面两个内容很简单,就是一个左右两个...: 但是原本的 gitcode 页面顶部是一直都存在的,不会拖动内容后顶部栏就消失,那么怎么做呢?...--内容--> overflow auto 会给予超出内容一个滚动条,此时滑动再多

    1.8K20
    领券