body overflow-y:保留滚动位置时隐藏

是一种CSS样式属性，用于控制网页中body元素的垂直滚动条的显示和隐藏，并且在隐藏滚动条时保留滚动位置。

具体解释如下：

body：表示选择网页中的body元素。
overflow-y：表示控制垂直方向的溢出内容。其中，y表示垂直方向，即垂直滚动条。
hidden：表示隐藏垂直滚动条。

当设置body元素的overflow-y属性为hidden时，网页中的垂直滚动条将被隐藏起来，用户将无法通过滚动条来滚动网页内容。但是，如果用户通过其他方式（如鼠标滚轮）滚动网页内容后，再次显示垂直滚动条时，网页将保持在之前滚动的位置。

这种样式属性常用于需要隐藏垂直滚动条，但又需要保留滚动位置的网页设计中，以提供更好的用户体验。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/umeng
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Tencent Real-Time Render）：https://cloud.tencent.com/product/trr

相关·内容

实现滚动时Header自动隐藏

这是掘金网页版的头部，当滚动条向下滑动时，主header会隐藏，次级header会吸在页面顶部。...简化不妨把滚动方向的检测放到一边，先实现这样的效果：为两个header加上类名hidden的时候，主header隐藏，次级header吸顶。这里可以直接用transform来实现。...这样，header的显示和隐藏就实现了，接下来就是检测滚动方向。...} else if (bottom) { isHidden.value = true } 是关键，当向上滚动时，显示header；向下滚动时，隐藏header。...前者，可以通过判断y值是否为0（或小于0）来实现；而后者，正常来说，滚动到底部时，文档高度-视窗高度应该和滚动条的y值是一致的。

2.3K3 0

弹窗查看内容时内容滚动区域设置为body区

看到渣浪的查看文章或者查看大图有个效果：弹窗查看内容时，如果内容过长有滚动条，则滚动条会被放到body区滚动什么意思呢？...将滚动位置放到整个body中，让弹窗中内容自适应高度这么做的好处自然很明显，body区域有更大的可视区域，来看看最后的效果点我预览 ?...showLayerScrollInBody(true); */ 代码不算太复杂，如果到这里为止已经看懂的话，应该不需要再往下看了一般的弹窗实现，需要设置遮罩层和弹窗的position为fixed，才能更好地保证页面有滚动条的时候位置不会出错...fixed之后，弹窗的最大高度为视窗高度，若要使得弹窗的内容区直接显示出来，就必须设置为非fixed值，而弹窗不能少了定位，那就只能使用 absolute值了但设置了absolute就无法计算页面有滚动条的时候的位置...absolute; height: auto; } 在页面有滚动条的时候，还要注意页面的滚动条会不会和弹窗中的滚动条产生冲突，如 ?

1.3K2 0

iframe 滚动条

滚动条重复在调用框架或者多级 iframe 的时候，经常会出现多个滚动条或者左右都有的情况，需要我们进行调整，现就设置方法记录如下。...去掉全部滚动条设置scrolling属性 scrolling: auto // 在需要的时候显示滚动条 scrolling: yes // 始终显示滚动条 scrolling: no //始终隐藏滚动条...设置 body body {overflow: hidden} 可以去看滚动条，也可以用来去看某一个滚动条时的方案。...有选择的去掉滚动条 body {overflow-x: auto; overflow-y: hidden;} /* 去看右边的滚动条，保留下面的 */ body {overflow-x: hidden;...overflow-y: auto;} /* 去掉底下的滚动条，保留右边 */ 代码优先级如果 scrolling: auto 或者 scrolling:yes 会依据 body 的值显示或者隐藏；如果

4.4K2 0

iframe关于滚动条的去除和保留(转载)

iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？...-----始终隐藏滚动条当设置 scrolling : no 时，全部的滚动条就没有了。...二：去掉右边的滚动条且保留底下的滚动条如果只想保留底下的滚动条，那么可以在嵌入的页面里设置 body{overflow-x：auto ; overflow-y：hidden；} 三：去掉底下的滚动条且保留右边的滚动条...在嵌入的页面里设置 body{overflow-x：hidden；overflow-y：auto；} 我们已经知道了这两个属性都可以设置滚动条的显示和隐藏，那么当两个同时设置时，会出现哪个效果呢？...通过检测，我发现当 scrolling = " auto " 或者 " yes " 时，如果设置了 body，那么就会使用body里的设置；当 scrolling = " no " 时，不管body设置了什么

5.2K2 0

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

将侧边栏位置设置为固定。在本节中，我们将专注于防止侧边栏在滚动主要内容时移动。我们希望将侧边栏样式设置为固定位置，以便主体可以自行滚动而不带上侧边栏。...将overflow-y属性设置为scroll会为超出其高度的内容创建一个可滚动的容器。超出侧边栏范围的项目将被隐藏。右侧会出现一个滚动条，允许您的网站用户查看所有内容。...可滚动的侧边栏隐藏扩展内容并显示侧边栏的代码片段如下所示： nav{ /* 先前的样式在这里 */ overflow-y: scroll; }关于overflow-y...另一方面，如果将overflow-y属性的值设置为auto，则浏览器只有在目标容器有超出内容时才会添加滚动条。...将overflow-y属性的值设置为auto后，如果没有内容超出容器的边界，浏览器将隐藏滚动条。恭喜您！您已成功创建了一个垂直滚动条。如果需要的话，可以休息一下。

1.7K0 0

vue中返回顶部封装的组件滚动一定位置显示隐藏

// handleScroll 和 methods 是同级 if (window.pageYOffset > 300) { //window.pageYOffset:获取滚动距离...} }, //返回顶部 backtop() { let top = document.documentElement.scrollTop || document.body.scrollTop...; // 实现滚动效果 const timeTop = setInterval(() => { document.body.scrollTop = document.documentElement.scrollTop...// handleScroll 和 methods 是同级 if (window.pageYOffset > 300) { //window.pageYOffset:获取滚动距离...}, back() { //返回顶部 $这个地方需要引入在线jq $("html").stop().animate( //animate：动画点击时让它行动

1.8K3 0

css笔记 - 张鑫旭css课程笔记之 overflow 篇

overflow基本属性值 visible（默认值）：超出依然显示 hidden ：超出隐藏 scroll ：超出，滚动显示。子元素不超出也会有滚动条的那条轨道。 auto:如果超出，滚动显示。...如果不超出，也不会有滚动条的位置。 inherit：ie8+，继承父元素的overflow属性值。...比如：overflow-x：hidden；那么overflow-y就会被重置为auto。...内容尺寸超出了容器尺寸的额限制滚动条的宽度机制滚动条会占用容器的可用宽度或高度 IE7/Chrome/FireFox(Win7)下都是17像素滚动条与body/html关系无论什么浏览器，默认滚动条均来自...所以，如果在单页应用中想要去掉页面的默认滚动条效果，只需要： html{overflow: hidden;} 没有必要设置body。因为页面滚动条不是作用在body上的。

2.9K1 0

CSS div隐藏滚动条「建议收藏」

隐藏指定 div 或者滚动标签里面的滚动条。 Document /* 需要滚动条隐藏的列表...: auto; background-color: yellow; } /* 隐藏滚动条 */ .list-view::-webkit-scrollbar {...display: none; } /* 没有进行隐藏滚动条的列表 */ .list-view-no { width: 100px; height: 100px...> 隐藏滚动条的列表： 1234567890 1234567890</

3.1K2 0

CSS深入理解学习笔记之overflow

hidden：超出部分隐藏。　　scroll：超出可滚动。　　auto：若超出才出现滚动条。　　inherit：继承。...body/html与滚动条：　　　　无论什么浏览器，默认滚动条均来自，而不是。...IE-7浏览器默认：html{overflow-y:scroll;} IE-8+浏览器默认：html{overflow-y:auto;} 　　　　因此想要去除页面滚动条html{overflow:hidden...*display:inline-block;*widht:auto; //IE7- 伪BFC特性 } 4、overflow与absolute绝对定位　　在absolute定位下，overflow隐藏和滚动会失效...锚点定位：通过锚链定位锚点位置。　　（2）锚点定位的本质　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。　　　　前提：①容器可滚动；②锚点元素在容器内。

4.1K5 0

vue返回上一页面时回到原先滚动的位置

项目结束，测试时发现在首页商品列表中，向上滑动几页后点击进入详情，从详情页面返回商品列表时，页面回到了最顶部，测试不通过说是用户体验不好，要求从哪里点击进去返回该页面时回到原先的滚动页面。...component: index, meta: { keepAlive: true } }, 这样在index.vue中，mounted方发只走一次，在浏览器上实现了返回原来滚动位置的目的...但是在手机上测试，发现没用，解决手机上实现目的的方法： //在页面离开时记录滚动位置 beforeRouteLeave (to, from, next) { this.scrollTop =...document.documentElement.scrollTop || document.body.scrollTop next() }, //进入该页面时，用之前保存的滚动位置赋值 beforeRouteEnter...(to, from, next) { next(vm => { document.body.scrollTop = vm.scrollTop }) }, OK！

3.1K2 0

html div 隐藏滚动条样式,div滚动条样式隐藏与显示

DIV滚动条样式是可以设置的，CSS滚动条同样也可以显示与隐藏，对div设置滚动条，设置其横向滚动条和纵向滚动条样式应该怎么做呢？...同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，接下来为大家介绍。...常规overflow怎么设置 overflow-y:scroll 总是显示纵向滚动条 overflow-y:visible 不剪切内容也不添加纵向滚动条 overflow-x:scroll 总是显示横向滚动条...并且clip属性设置将失效； auto：此为body对象和textarea的默认值。...在需要时剪切内容并添加滚动条，DIV默认情况也是这个值，但需要设置时候设置即可； hidden：不显示超过对象尺寸的内容； scroll：总是显示滚动条。

8.8K6 0

修复一个因为 scrollbar 占据空间导致的 bug

起初认为是红框提示位置不对，就去找代码看： <Input // ......初步判断是，红框位置结算有差异，差异大小大概是17px, 但是这个差异是怎么产生的呢？就去测试小哥的PC上看，注意到一个细节，在我PC上，滚动条是悬浮的： ?...外部容器的滚动条这里的外部容器指的是html，直接加在最外层: html { overflow-y: scroll; } 手动加上这个特性，不论什么时候都有滚动宽度占据空间。...外部容器绝对定位法用绝对定位，保证了body的宽度一直保持完整空间： html { overflow-y: scroll; // 兼容ie8，不支持:root, vw } :root { overflow-y...: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow

3.3K2 0

学前端到了CSS阶段，你一定要掌握这9大防御式开发技能

>5、场景五：必要时显示滚动条在内容比较长的情况下，可以通过设置 overflow-y控制滚动条是否展示。...不需要显示滚动条，只有内容溢出时才显示*/ overflow-y: auto; } /* 整个滚动条*/ .content::-webkit-scrollbar {...不需要显示滚动条，只有内容溢出时才显示*/ overflow-y: auto; /*预留好滚动条位置，必免引起重排*/ scrollbar-gutter: stable... 7、场景七：锁定滚动链我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。...: 0px auto; overflow-y: auto; background-color: skyblue; /*当滚动到滚动条底部和顶部时，会触发父元素的滚动条滚动

1.8K0 0

wxss学习系列《一》定位（position），布局(Layout)

4.visibility：是否隐藏，与display隐藏不同，visibility隐藏的时候保留元素占据的位置。 5.overflow：设置对象处理溢出内容的方式。...8.none：隐藏对象。不占物理位置。 9.table：指定对象最为块元素级的表格。三：float：定义了元素在那个方向浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。...hidden：设置隐藏（隐藏了也占位置）。collapse：隐藏表格的行或者列。六.overflow：处理溢出内容的方式。 1.取值：visible，hidden，scroll，auto。 ?...hidden：隐藏溢出容器的内容且不会出现滚动条。 scroll:隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。...auto:当内容没有溢出容器的时候不出现滚动条，当内容溢出容器的时候出现滚动条。按需出现。

2.5K10 0

bootstrap源码分析之scrollspy（滚动侦听）

源码文件： Scrollspy.js 实现功能 1、当滚动区域内设置的hashkey距离顶点到有效位置时，就关联设置其导航上的指定项 2、导航必须是 .nav > li > a 结构，并且a上href... <div data-spy="scroll" data-target="#selector" style="height:100px; overflow:hidden;<em>overflow-y</em>...hashkey<em>位置</em>距离容器顶部只有 offset设置的值，就会设置导航中对应的href高亮 2、如果<em>滚动</em>区域是<em>body</em>，会将<em>滚动</em>区域元素标记为window（构造函数中判断） this....$(window) : $(element) 3、getScrolHeight：获取<em>滚动</em>容器的内容高度（包含被<em>隐藏</em>部分） this....$<em>body</em>[0].scrollHeight, document.documentElement.scrollHeight) 4、refresh：刷新并存储<em>滚动</em>容器内各hashkey的值 4.1、默认用

1K10 0

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

该函数接受一个起始颜色和一个结束颜色，并根据选择的方向和位置进行渐变填充。平滑滚动背景渐变效果实现步骤创建一个具有滚动效果的容器。 .container { height: 100vh; overflow-y: scroll; } 该容器使用vh单位设置高度为视口高度，并设置 overflow-y...添加滚动事件监听器。通过JavaScript给容器添加滚动事件监听器，以便在滚动过程中更新背景渐变的位置。...，我们获取容器的滚动位置scrollTop、容器的总高度scrollHeight、视口高度windowHeight，并根据滚动进度更新背景渐变的位置。.../style> <!

4981 0

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

scrollbar属性、样式详解 1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置... 没有垂直滚动条没有滚动条...或<body style="overflow:hidden"> 2.设定多行文本框的滚动条...没有水平滚动条没有垂直滚动条 $(document.body).css({ "overflow-y":"hidden" }); </script

4.7K3 0

吸顶效果解决方案

（最重要的元素通常固定在页面顶部，navbar-fixed-top）二.PC解决方案页面滚动到一定位置时，做一些事情 “回到顶部”按钮也是这样的，页面向下滚动超过150px时，显示该按钮，否则隐藏...监听滚动判断位置的方法完全失效，平滑吸顶效果变成了滚过临界位置直到停止滚动时，吸顶元素跳到目标位置，体验非常差，不可忍受 scroll不能用，但还可以有一些奇怪的思路，比如定时器读scrollTop，touchmove...，让页面滚动，转到吸顶状态，多个tab列表无缝切换，浏览状态互不影响吸顶状态时划动当前tab列表，到头，让页面滚动，转到非吸顶状态也就是说，非吸顶状态时，让tab列表不能滚动（overflow-y:...hidden）；吸顶状态时，让tab列表可以滚动（overflow-y: auto）但是IOS sticky不由我们控制，且无法实时获知吸顶状态，想要获知吸顶状态的话，又回到了最初的问题，页面滚动过程中...CSS sticky并不能解决这个问题笔者还没有找到合适的解决方案，目前方案是牺牲tab浏览状态独立性，多tab共用body的滚动条，切换tab时滚回之前的位置。

3.5K1 0

8.6K3 0

对html与body的一些研究与理解

标签的满屏的背景色不见了，“失效”了。其实，在我看来，不是“失效”，是生效了。当标签无背景样式时，的背景色其实不是标签的背景色，而是浏览器的。...，加上鼠标位置偏低，一旦浮动层出现，说不定页面的高度被撑高并出现滚动条，这是在Firefox浏览器下就会产生页面的晃动，原因是滚动条的出现导致页面的宽度减小，布局发生一些偏移，而这种便宜造成的体验是不好的...很多人会想到设置 body{overflow-y:scroll;} Firefox下是出现了滚动槽了，但是IE下出现了两个滚动条，如下： ?...所以呢，只要在css中些写上： html{overflow-y:scroll;} 就可以让IE和Firefox（包括chrome）浏览器默认产生滚动条的滚动槽了。...前段时间看到百度的一道面试题，说什么透明层无论滚动与否都满屏显示，其实就是对和标签做一番手脚，两者高度100%显示，同时溢出隐藏（overflow:hidden），然后用一个<div

2.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云