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

在jquery中滚动不适用于具有vh高度的div类

在jQuery中,滚动不适用于具有vh高度的div类的问题可能是由于vh单位的特性导致的。vh单位是相对于视口高度的百分比单位,而不是相对于父元素的高度。因此,在具有vh高度的div类中使用滚动可能会导致滚动不起作用。

解决这个问题的方法是使用CSS的overflow属性来控制滚动。可以将具有vh高度的div类的overflow属性设置为"auto"或"scroll",这样就可以在内容溢出时显示滚动条,并实现滚动效果。

以下是一个示例代码:

HTML:

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

CSS:

代码语言:txt
复制
.vh-height {
  height: 100vh;
  overflow: auto; /* 或者使用 overflow: scroll; */
}

在上述示例中,我们给具有vh高度的div类添加了一个名为"vh-height"的CSS类,并将其高度设置为100vh。然后,通过设置overflow属性为"auto"或"scroll",使得在内容溢出时显示滚动条。

推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器,并通过腾讯云控制台进行管理和监控。

产品介绍链接地址:https://cloud.tencent.com/product/cvm

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

相关·内容

CSS | 视差滚动 | 笔记

在这个示例中,translateZ(-2px) 将 .layer2 层向内移动了 2 个像素单位。 通过在视差滚动中应用不同的 translateZ 值,可以创建层次感和深度效果。...通过调整 perspective 属性的值,可以改变透视效果的强度。 在视差滚动中,"向内移动"和"向外移动"是相对于观察者(即浏览器窗口)的视角来说的。...视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height:100% 铺满父容器的高度 height:100vh 铺满屏幕(viewport)的高度 "100vh...vh 是 css 中的一个相对长度单位, 是相对于视窗的高度, 100vh 就是指 元素的高度等于当前浏览器的视窗高度, 即浏览器内部的可视区域的高度大小。...vh 优势在于能够直接获取高度, 而用 % 在没有设置 body 高度的情况下, 是无法正确获得可视区域的高度的。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化, 这使得它几乎毫无用处。

82021
  • 前端面试实录CSS篇(最近一周)

    • 区别: • 伪类操作的对象是文档树种已有的元素或样式 • 伪元素则是创建一个文档树以外的元素或样式 • : 表示伪类 • :: 表示伪元素 • 作用: • 伪类:通过在元素选择器上加入伪类改变元素的状态...垂直方向上,自上而下排列,和文档流的排列方式一致 2. 在 BFC 中上下两个相邻的两个容器的 margin 会重叠 3. 计算 BFC 的高度时,需要计算浮动元素的高度 4....相对于父元素,rem相对于子元素 • vw/vh: 视图窗口单位,vw 宽度,vh 高度,还有 vmin 和 vmax 两个相关单位 20. px,em, rem 的区别以及使用场景?...与 fixed 的根元素不同,absolute 的根元素可设置,fixed 的根元素是html • 在有滚动的页面中,absolute 会跟随父元素进行滚动,而 fixed 固定在某个位置 27....` 是浏览器滚动的过的距离; `imgs.offsetTop` 是元素顶部距离文档顶部的高度(包括滚动条的距离); 内容达到显示区域的:`img.offsetTop < window.innerHeight

    11210

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

    背景渐变效果实现原理 在实现平滑滚动背景渐变效果前,我们先了解一下背景渐变的实现原理。CSS中可以通过linear-gradient()函数实现背景渐变效果。...该函数接受一个起始颜色和一个结束颜色,并根据选择的方向和位置进行渐变填充。 平滑滚动背景渐变效果实现步骤 创建一个具有滚动效果的容器。 div class="container"> div> .container { height: 100vh; overflow-y: scroll; } 该容器使用vh单位设置高度为视口高度,并设置 overflow-y...(scrollHeight - windowHeight)) * 100; container.style.backgroundPositionY = `${progress}%`; }); 在滚动事件的回调函数中...,我们获取容器的滚动位置scrollTop、容器的总高度scrollHeight、视口高度windowHeight,并根据滚动进度更新背景渐变的位置。

    56310

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

    在需要修改部分的代码有相关提示,请仔细阅读之后,使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码, 把对应的水果放在对应的盘子里面,最终效果如下...(2)主体部分: div id="board">:定义一个容器,作为整个布局的基础。它具有sticky定位,使其在页面滚动时保持固定在顶部。...order: 1;:设置元素在 Flex 容器中的排列顺序为 1。...max-width: 100vh; max-height: 100vh;:设置最大宽度和高度为视口高度的 100%,防止在大屏幕上布局过大。...在#board内部创建#pond和#background容器,分别用于放置青蛙和荷叶。 在#pond中创建多个青蛙元素,在#background中创建多个荷叶元素,并通过类名区分颜色。

    5400

    【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】

    div class="shadow">div>:可能用于添加阴影效果的子元素。 vh;:将 body 的高度设置为视口高度的 100%。 transition: 0.25s;:添加过渡效果,让元素的属性变化更平滑。...:这是 jQuery 的文档就绪函数,等同于 (document).ready(function() {...}),确保在文档的 DOM 结构加载完成后才开始执行其中的代码。...具有 active 类的元素使用 flex-grow 占据更多空间,其他元素占据较少空间。 页面通过 Flex 布局和媒体查询实现了基本的布局和响应式设计。...样式更新: 由于 CSS 中对 .option.active 和 .option:not(.active) 有不同的样式设置,添加 active 类的元素会展开,其宽度、圆角、阴影等样式会更新

    4200

    前端硬核面试专题之 CSS 55 问

    所以设置了 position:absolute,其父类的该属性值要注意,而且 overflow:hidden 也不能乱设置,因为不属于正常文档流,不会占据父类的高度,也就不会有滚动条。...常用于 header,footer 或者一些固定的悬浮 div,随滚动条滚动又稳定又流畅,比 JS 好多了。fixed 可以有很多创造性的布局和作用,兼容性是问题。 position:inherit。...JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。 PNG 的特性 能在保证最不失真的情况下尽可能压缩图像文件的大小。...优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器 jQuery 实现。通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。优点:能兼容到各个版本的,效果可控性好。...---- ::before 和 :after 中双冒号和单冒号有什么区别 ?解释一下这 2 个伪元素的作用 单冒号 (:) 用于 CSS3 伪类,双冒号 (::) 用于 CSS3 伪元素。

    2K20

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

    /paintBug.html box的宽度设置为900px,wrap设置为100%(~~这个百分比是相对于viewport的);缩小浏览器窗口,当宽度小于900时会出现滚动条,向右滚动,会发现蓝色部分并不是...移动元素,比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流),或者移动元素到另外1个父元素中。(重绘+回流) 4....———– 4. rem + js css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了...vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。 vmin:vw和vh中较小的那个。 vmax:vw和vh中较大的那个。...x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀

    3.3K20

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

    简单来说,在页面未开始滚动时顶栏处在其原有的位置上,当页面向下滚动一定区域后,顶栏会跟随滚动固定在页面上方。 本题请实现一个顶栏固定的课程网站首页。...接着,打开环境右侧的【Web 服务】,就可以在浏览器中看到如下效果: 目标效果 请在 style.css 文件中补全代码。...当用户向下滚动的高度没有超过标题栏(即 .heading 元素)的高度时,保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时,固定显示 Tab 栏在网页顶部。...:使页面在不同设备上具有良好的响应式布局,宽度根据设备屏幕宽度自适应...position: sticky; top: 0px:使 Tab 栏在页面滚动时固定在顶部。 .buttons a 样式: 设置 Tab 栏中链接的样式,去除下划线,设置文字颜色和内边距等。

    3600

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

    一、flex 仿 JD 布局 首先,我们在编辑器中,写上基础代码,当然要在 style 中加上一个 flex 类,用于 flex 布局的定义,这个是必然需要的,在此一定得加上。 的方向就是 column,竖轴方向,那么此时我们在 style 中添加一个类,直接类名咩咩咩为 column...flex 方向为 column: 随后在 body 之下添加对应的 div 表示头部,但是此时我们需要添加两个 div ,一个用于头部,另一个用于其主要内容区域...: 此时细心的话,你应该可以发现, 30 vh 应该不止这一点高度,这是因为我们 flex 布局可以对当前我们的内容进行伸缩,因为 body 高度就 100vh,多了内容肯定要平均的去分配高度的...: 但是在原本的 gitcode 页面中顶部是一直都存在的,不会拖动内容后顶部栏就消失,那么怎么做呢?

    1.8K20

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

    先知道一下viewport的四个单位,vw、vh、vmax、vmin: vw:1vw 等于视口宽度的1% vh:1vh 等于视口高度的1% vmin: 选取 vw 和 vh 中最小的那个 vmax:选取...vw 和 vh 中最大的那个 这边需要注意的是,vw是视口宽度,是连滚动条都算在内的: div style="width: 100vw;height: 20vh;background: #9dff00...: 80vh;background: #a6a9af">div> 我把视口宽度拉到1000,因为出现滚动条,100vw的宽度是1000px,宽度是100%的则是983px。...所以,用vw、vh的时候,注意要宽度百分百的时候,设置100%,否则底部会出现滚动条。当然,如果是移动端就没关系,移动端的滚动条是滑动的时候才出现,所以移动端的视口宽度就是百分百。...100vw;height: 20vmax;background: #005eff">div> 同样是把视口宽度拉到500,高度是968,20vmin的高度是100px,20vmax的高度是193.594px

    1.7K30

    我碰到的那些面试题html+css

    这个熟悉了就知道用哪个了,比如有些div悬浮在上方,可能就需要fixed,也就是滚动条移动时不会改变与浏览器的位子, relative可能就要相对于父结点进行定位了一般都是相对定位的*/ 5、浏览器兼容性.../* html5这块尽量不使用html5中新增的一些语义化标签; css方面不要使用css3新增内容 js这块,引用jquery1.0系列版本 针对360浏览器(兼容模式,极速模式) html hack...在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。...容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。 7,浏览器兼容问题七:各种特殊样式的兼容,比如透明度、圆角、阴影等。...,可以考虑使用em; 5.vh和vw vh和vw 相对于视口的高度和宽度,1vh等于1/100的视口高度,1vw等于1/100 的视口宽度,比如:浏览器高度900px,宽度为750px, 1vh=900px

    1.2K20

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

    简单介绍下rem布局方案 rem是css中的长度单位,1rem=根元素html的font-size值。...若使用vw布局,就不需要再像rem那样,在js中去动态设置根元素的font-size了,sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿为例 @function... vw($px) {     @return ($px / 750) * 100vw; } //假设一个div元素在视觉稿中,宽度为120px,字体大小为12px div {     width: vw...百分比%是根据父元素宽度或者高度进行计算,而vw vh固定按照viewport来计算,不会受父元素宽高度影响。...如果你的页面只适用于微信、qq,那绝对能放心使用vw单位,还可以配合vh针对一些特殊比例屏幕做处理,彻底摆脱使用rem带来的副作用,删掉html头部计算font-size的那段js代码,让你的代码更纯粹

    3.5K10

    移动端适配大法

    ,比如文字块 百分比在PC端自适应上也经常用到,着实相当好用,但它一般用于宽度自适应的设置,高度设置百分比时,要求其父类元素有明确高度。...padding 会让你的页面出现滚动条,也许这是你不希望的。...因此使用这种方法时,应将JS代码放入head头部中并且在CSS引入之前。...(也就是常说的2倍图、3倍图的使用)等 四、vw、vh vw是以屏幕宽度为基准的百分比单位,1vw=1%* deviceWidth vh是以屏幕高度为基准的百分比单位,1v=1% * deviceHeight...vw,vh确实很好用,但是目前使用时仍需考虑兼容性的问题,在国内一些手机自带浏览器里(比如华为)会失效,并且据说碰上X5内核时也容易踩坑 。

    2.7K20

    手把手教你实现在页面顶部实时反馈当前阅读的进度条

    顾名思义,就是在刚进入页面或刷新或请求数据时在页面顶部有一个进度条给用户以反馈,使页面加载显得不那么“尴尬”。 但只有很少人见过 “在页面顶部实时反馈当前阅读进度” 的效果 —— 为什么?...因为有滚动条。但不得不提的是:这真的很有用!不管是“在有些要求高的页面对自带滚动条很厌恶”还是“即使有滚动条也可以给用户更好看的提示效果”。当然,目前第一种场景比较多。...回到我们这个想法中:其实我们要展示出来的,不就是“当前向上滑动了多少”与“文档区域总高度”的比例吗?那如果实时监听变化并展示到页面上,不就成了? ?...*/ } } 这种方法当然也有一丝缺点:它需要“只能偏大不能偏小”的控制background-size的宽度,但是这显然不适应精确在不同分辨率大小且需要响应式的屏幕中展示!...-- 在body下添加一个空标签 --> div class="scroll_fixed">div> body { position: relative; } .scroll_fixed

    54810

    如何使用 CSS 设置和自定义水平和垂直滚动条

    滚动条是图形用户界面(UI)中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下,浏览器会为body内容的溢出包含一个滚动条。...从截图中可以看出,侧边栏的底部看起来不像设置在底部。这是因为内容比其容器的高度长。在下一节中,我们将学习如何防止导航项目列表显示在侧边栏之外。d)....样式化水平滚动条(flexbox滚动)样式化水平滚动条与样式化垂直滚动条类似,只是一个属性不同。高度属性用于设置水平滚动条的厚度,而不是宽度属性。...在本练习中,我们将重用以前的样式,但将使用高度来设置滚动条的厚度,如下所述:将scrollbar-track的背景颜色设置为蓝色将scrollbar-thumb的背景颜色设置为绿色将滚动条的高度(厚度)...为了实现所有滚动条的统一定制,我们可以按如下方式应用样式:在不选择任何特定元素、标签或类名的情况下应用滚动条样式在网站同时具有水平和垂直滚动条的情况下,为两个属性的height和width同时赋值。

    1.9K00
    领券