首页
学习
活动
专区
工具
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 不同浏览器实现方式上也有一点微妙变化, 这使得它几乎毫无用处。

58921

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

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

34110

前端面试实录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

9510

前端硬核面试专题之 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(jqueryanimate方法就是,改变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.2K20

(长文预警) 你还在烦工作碰到拖拽问题?一个框架jiejue

Sortablejs 简介 Sortable —是一个JavaScript库,用于现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。...这使我们可以测试较旧浏览器行为,甚至较新浏览器,也可以使桌面浏览器,移动浏览器和旧浏览器之间拖放感觉更加一致。...最重要是,Fallback始终会生成该DOM元素副本,并附加fallbackClass选项定义。此行为控制此“拖动”元素外观 <!...也可以将其设置为HTMLElement,这将是自动滚动基础 scrollFn 选项 定义将用于自动滚动功能。默认情况下使用el.scrollTop / el.scrollLeft。...当您具有带有专用滚动功能自定义滚动条时很有用。'

7K10

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

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

1.7K20

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是视口宽度,是连滚动条都算在内: 我把视口宽度拉到1000,因为出现滚动条,100vw宽度是1000px,宽度是100%则是983px。...所以,用vw、vh时候,注意要宽度百分百时候,设置100%,否则底部会出现滚动条。当然,如果是移动端就没关系,移动端滚动条是滑动时候才出现,所以移动端视口宽度就是百分百。...100vw;height: 20vmax;background: #005eff"> 同样是把视口宽度拉到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后横向marginbug。...容器高度为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=根元素htmlfont-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代码,让你代码更纯粹

3K10

移动端适配大法

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

2.7K20

弹指间,重温几个设置满屏小技巧

这里扩展了解下vh移动端设备上部分“特性” 我们依然设置body 100vh情况下,分别打开微信内置浏览器、Safari浏览器、Google浏览器 从效果图不难看出,Safari浏览器、Google...浏览器100vh这个方案都是不完美的,都出现了滚动条,并不能达到我们预期可视区域满屏高度。...作为一个cv高手,借助搜索引擎我们了解到,Safari把网址栏与工具栏算进了100vh,是第一个通过选择根据屏幕最大高度vh定义固定值来更新其实现移动浏览器之一,而后Google浏览器也效仿它。...滚动时可见区域会动态变化,如果我们相应地更新CSS视口高度,则需要在滚动过程更新布局。为了达到更好用户体验,使用较大视图尺寸是最好折衷方案。..., `${vh}px`); 这样就成功:root创建了--vhcss变量 为了防止旋转屏幕功能使用,我们需要监听窗口调整大小事件来更新我们创建--vh值 window.addEventListener

1.1K20

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

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

49010

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

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

94600

蒙层禁止页面滚动方案

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

6.1K21

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

JS实现 如果我们利用 JavaScript 来实现阅读进度,我们要获取到文档高度、文档滚动距离、浏览器窗口可视高度。...类似于 js 功能检查,可以检查 CSS 某一属性或功能当前浏览器是否支持。...,蓝块仍保持原来大小,使用一块 0.8 透明度黑块盖在上面,黑块给蓝块顶部空出 10px 空间。...就可以从总长删除一屏高度 */ /* 100vh 浏览器视口高度 */ background-size: 100% calc(100% - 100vh + 4px); background-repeat...: no-repeat; } 复制代码 设置盖住蓝块白块 阅读进度条高度为 3px ,因此设置白块高度为 100% \- 3px,可以另外加一个 div 元素来设置白块,但小包推荐使用为元素

68530
领券