overflow-x:隐藏；不会工作，但overflow-x:scroll；会吗？

overflow-x:隐藏；不会工作，但overflow-x:scroll；会。

overflow-x属性用于控制元素在水平方向上的溢出内容的显示方式。它有以下几个取值：

hidden：隐藏溢出内容，不显示滚动条。
scroll：显示溢出内容，并显示滚动条。
auto：根据内容是否溢出来决定是否显示滚动条。

当设置overflow-x为hidden时，如果元素的内容在水平方向上溢出，那么溢出的部分将被隐藏，不会显示滚动条。

当设置overflow-x为scroll时，如果元素的内容在水平方向上溢出，那么溢出的部分将显示，并显示水平滚动条，用户可以通过滚动条来查看溢出的内容。

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

腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile
腾讯云数据库（DB）：https://cloud.tencent.com/product/db
腾讯云区块链（BC）：https://cloud.tencent.com/product/bc
腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod

相关·内容

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

overflow基本属性值 visible（默认值）：超出依然显示 hidden ：超出隐藏 scroll ：超出，滚动显示。子元素不超出也会有滚动条的那条轨道。 auto:如果超出，滚动显示。...overflow-x/y（ie8+）规范：如果overflow-x、overflow-y的值相同，则等同于overflow设置了这个值。...如果overflow-x、overflow-y的值不相同，且其中一个属性的值被赋予visible，而另一个被赋予scroll、auto、hidden等值，那么visible会被重置为auto。...可以触发BFC的overflow属性值： scroll、auto、hidden这三个可以触发元素的BFC特性。visible不会。...并且父元素没有设置position：relative；限制子元素的时候，子元素就不受父元素overflow：hidden；的限制，即使超出也不会被隐藏了！

2.8K1 0

CSS 中关于 Overflow ，你需要了解的这些知识点！

auto; } 它可以在桌面浏览器上工作。...我使用`auto`是因为它在内容足够长之前不会显示滚动条 */ .modal__content { flex-grow: 1; /* [1] */ overflow-y: auto; /...例如，它们不会彼此堆叠，而不是堆叠其子项。在这种情况下，最好使overflow: hidden将其隐藏在包装器上，然后向其添加border-radius，这样我们只需要设置一个地方就行了。...Firefox scroll标签在Firefox中，会向导致水平滚动的元素添加一个小标签。 ? 删除元素有时，上述技术无效。...最后一个解决方案:使用overflow-x: hidden 最后，可以使用overflow-x：hidden解决水平滚动问题，但这一般是最后没办法的备用方案。

3.9K2 0

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

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

8.7K6 0

Element scrollbar 使用封装

__wrap 类属性为 overflow-x: hidden; 移除， el-scrollbar__wrap 属性可以在浏览其中查看元素看到，在自定义的元素内部，选择元素后在 style 添加 overflow-x...*/ .el-scrollbar__wrap { overflow-x: hidden !...https://vue-loader.vuejs.org/zh/guide/scoped-css.html , 如下写法 .content-scroll { height: 300px;...默认使用纵向滚动条效果，在我们项目里的 tag 页签功能区使用了横向滚动条，隐藏了纵向滚动条，由于自定义的需求，在实际使用时需要根据情况设置对应的边距问题，这里调整的时候还需要隐藏原生滚动条，这时候需要耐心一点才能调出想要的页面效果

9131 0

使用 CSS Scroll Snap 优化滚动，提升用户体验！

: auto; } 了这个，我们需要添加另外两个属性来让scroll snap工作。...但是，如果该值是proximity，则浏览器将完成这项工作，它可能会吸附到定义的点(在我们的例子中start)。注意，proximity 是默认值，但是为了清晰起见，我们这里还是声明一下它。....section__item { scroll-snap-align: start; scroll-snap-stop: normal; } 法动太快可能会跳过三个或四个项目，如下所示： scroll-snap-stop...Scroll Snap Padding scroll-padding设置所有侧面的滚动边距，类似于padding属性的工作方式。在下图中，滚动容器的左侧有50px的内边距。...请注意，当用户再次向右滚动时，.item-3会捕捉到滚动容器的开头，这意味着仅具有边距的元素将受到影响。

2.7K4 1

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

: auto; } 了这个，我们需要添加另外两个属性来让scroll snap工作。...但是，如果该值是proximity，则浏览器将完成这项工作，它可能会吸附到定义的点(在我们的例子中start)。注意，proximity 是默认值，但是为了清晰起见，我们这里还是声明一下它。....section__item { scroll-snap-align: start; scroll-snap-stop: normal; } 法动太快可能会跳过三个或四个项目，如下所示： image.png...Scroll Snap Padding scroll-padding设置所有侧面的滚动边距，类似于padding属性的工作方式。在下图中，滚动容器的左侧有50px的内边距。...请注意，当用户再次向右滚动时，.item-3会捕捉到滚动容器的开头，这意味着仅具有边距的元素将受到影响。

2K3 0

3种方法实现CSS隐藏滚动条并可以滚动内容

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。...方法1：计算滚动条宽度并隐藏起来在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？其实我只是把滚动条通过定位把它隐藏了起来。...: hidden; overflow-y: scroll; } 演示这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。...: hidden; overflow-y: scroll; } .inner-container::-webkit-scrollbar { display: none; } 演示方法3：css...隐藏滚动条同时该文章还分享了一种通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。

20.2K5 2

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

如期进行了，小程序将于2017年1月9日对个人开放，公司项目的demo版做了个大概，过程中花的时间最多的还是页面布局，所以后面将花一段时间将css的属性在小程序里过一篇，虽然小程序里面对于css支持，但没有说明支持到什么地步...hidden：设置隐藏（隐藏了也占位置）。collapse：隐藏表格的行或者列。六.overflow：处理溢出内容的方式。 1.取值：visible，hidden，scroll，auto。 ?...2.visible:对溢出内容不做处理，内容可能会超出容器。 hidden：隐藏溢出容器的内容且不会出现滚动条。...scroll:隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。 auto:当内容没有溢出容器的时候不出现滚动条，当内容溢出容器的时候出现滚动条。按需出现。...七：overflow-x：横向处理溢出内容的方式； 1.取值：visible，hidden，scroll，auto。 ? 2.同overflow。

2.4K10 0

css怎么隐藏滚动条「建议收藏」

法一： ①使用伪类隐藏滚动条（仅限Chrome与Safari） ②scrollbar-width: none;（仅限firefox） ③-ms-overflow-style: none;（仅限IE...: 16px; overflow-x: scroll; /* 设置溢出滚动 */ white-space: nowrap; overflow-y: hidden; /*...隐藏滚动条 */ scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ } .element...relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x...: hidden; overflow-y: scroll; } /* for Chrome */ .inner-container::-webkit-scrollbar {

4.2K2 0

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

它是 overflow-x 和overflow-y的简写属性。 /* 默认值。...内容不会被修剪，会呈现在元素框之外 */ overflow: visible; /* 内容会被修剪，并且其余内容不可见 */ overflow: hidden; /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容...: inherit; 官方描述： overlay 行为与 auto 相同，但滚动条绘制在内容之上而不是占用空间。...: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow..., 然后使用scroll 做为兜底。

3.2K2 0

CSS尺寸和边框

1.什么是溢出超出宽和高的范围 2.属性 overflow overflow-x... overflow-y :垂直溢出取值 visible 代表溢出显示(默认) scroll... 代表出现滚动条 auto 代表自动 hidden 代表溢出隐藏 div{width:300px;... height:100px; overflow-x:scroll; } P{ width:600px; height:80px; } /*div是整个页面尺寸，当div

1.6K2 0

前端课程——显示与隐藏

前端课程——显示与隐藏显示与隐藏 display display:none; 这种方式将元素设置隐藏后，该元素不会在占用空间。设置为以下属性时，会取消display的隐藏。...display属性 display不仅仅是作为显示与隐藏。...内容不会被修建，会显示在父级容器之外 hidden:内容会被修剪，并且其余内容不可见。隐藏的部分不会被看到 scroll:内容会被修剪，浏览器会显示滚动条以便查看其余内容。...始终提示滚动条，效果不好 auto：浏览器决定如果内容溢出，提供相应的滚动条；没有溢出不做任何处理 overflow-x属性水平方向上的溢出 visible: 默认值。...内容不会被修剪，会显示在父级容器之外。 hidden:内容会被修剪，并且其余内容不可见。. scroll: 内容会被修剪，浏览器会显示滚动条以便查看其余内容。

2.9K3 1

小技巧 | 渐变消失遮罩的多种实现方式

题目大致是如何实现下述图片的效果，如果使用 div 前置遮挡的话，会影响 div 后面的按钮，使其无法被点击。本文将简单介绍几种这个效果的实现方案。...: scroll; } 像是这样：首先，我们需要实现右侧的渐变消失的遮罩效果，这个最常见的，就是通过叠加一个从透明到白色的渐变层实现。...当值为 none 时，元素永远不会成为鼠标事件的 target，也就是我们常说的，实现了鼠标点击穿透。代码如下： .g-container { ......mask：属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。...: scroll; mask: linear-gradient(90deg, #000 70%, transparent); } 由于不存在遮挡物，也就不再需要 pointer-event 了，

3072 0

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

滚动条基本知识：建议比价华丽的页面使用overflow:scroll这个样式的滚动条，比较好看。...scrollbar属性、样式详解 1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置...以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。...举例： 2，页面有多个div块，如何让...script> $(document.body).css({ "overflow-y":"hidden" }); 注：1，不显示总的滚动条，会导致页面内容过多事不能显示超出页面高度的内容

4.5K3 0

HTML- white-space 和 overflow 两个重要的 CSS 属性

点击按钮 day4-前端菜单会滚动到中间，在iOS中想要实现这种效果还是比较简单的，接下来看看在前端中实现这种效果的要点有哪些？...从下面的注释可以知道我们要选择 scroll ，上下左右滑动可以通过 overflow-x 和 overflow-y 分别控制各个方向的具体表现。 /* 默认值。...内容不会被修剪，会呈现在元素框之外 */ overflow: visible; /* 内容会被修剪，并且其余内容不可见 */ overflow: hidden; /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容...*/ white-space: nowrap; /* CSS 有一个属性 overflow，它可以控制对于超出可视区域的内容如何处理 */ /* x轴可以滚动 */ overflow-x...: scroll; /* y轴内容超出隐藏 */ overflow-y: hidden; /* height: 44px; */ background: green;

2.6K2 0

前端基础-CSS内容溢出

内容溢出语法：overflow:值取值：auto当内容溢出时，生成滚动条------默认，hidden内容溢出时超出部分隐藏示意图 ?...总结： overflow取值： auto----自动生成滚动条（右边） hidden----超出部分隐藏 scroll----右边和下边都有滚动条设置水平方向溢出可以使用overflow-x...，纵向溢出使用overflow-y，取值和overflow一样重点：overflow:hidden;超出部分隐藏

5732 0

《CSS世界》第六章流的破坏与保护总结

（行框盒子在正常定位状态下只会跟随浮动元素，不会发生重叠） clear属性 clear属性让自身不能和前面的浮动元素相邻。clear属性只有块级元素才有效。...BFC BFC定义通过一些特定的手段形成的封闭空间，即BFC元素内部不会影响外部的元素。可以用来防止margin重叠，清楚浮动防止父元素高度坍塌。...但在其他浏览器下会让元素尺寸包裹收缩。 overflow overflow裁剪的边界是border box的内边缘，而非padding box的内边缘。...overflow-x和overflow-y属性中一个值设置为visible而另一个设置为scroll、auto或者hidden，则visible的样式表现会如同auto。...除非 overflow-x和overflow-y 属性值都是visible，否则会当成auto来解析。

7473 0

overflow的一些小细节笔记

overflow-x 和 overf-y 同时使用的问题如果 overflow-x 和 overflow-y 二者的值相同，等同于 overflow 如果二者值不同，其中一个被赋予 visible...另一个被赋予 auto ， hidden ， scroll ，其中 visible 会被重置为 auto 。...overflow: scroll 的出现所有的 scroll 均是来自于 html ，不是 body 。证明就是 body 本身是有 .5em 的的 margin 。...ie7及以下默认右侧始终有一个 scroll 的条。即使你的内容一个字没写。...如果滚动区域写了上下 padding ，那么 padding-bottom 会缺失。滚动条导致布局问题滚动条是会占据宽度的，所以最好是把宽度预留足够。

1.8K0 0

win8效果的横向布局

前段时间一直在忙着写代码，公司有一个制漆的产品，与传统纵向布局不一样，要求页面横向布局，类似win8的那种布局效果，最开始，我也没有什么头绪，然后硬着头皮做了，后来，遇到了很多麻烦，我网上查了一些资料，但都不太好...:hidden; overflow-y:auto; padding:5px; } .scroll{ height:100%; } .scroll-top,.scroll-bottom...:hidden;overflow-y:auto;padding:5px;} .scroll{height:100%;} .scroll-top,.scroll-bottom{...doctype html,解决办法是html，body{margin:0px;padding:0px;}这样的话问题三就不会出现了。...8、原理上，flex里面的排列方式是一行显示，但如果要显示两行的话，给这两行加上父元素，display:block;就可以。时隔一年，我再来做这个，越来越简单了，废话不多说，直接上代码 <!

2.1K3 0

解决移动端水平滚动使用justify-content显示不全问题

由于选项的个数是不一定的，如果很少的话不会有横向滚动，是需要居中的 ?...自然而然的是这么写的 .father { display:flex; justify-content: center; overflow-x...搜了半天也没搜到答案，真是个坑，注意父元素不能再加justify-content: center;代码如下, 0" class="type-scroll...{{ $t(item.lang) }} css如下 .type-scroll...justify-content: center; // 关键就是这两行了 .father { display: flex; overflow-x

2.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云