关于overflow-x:scroll无法正常显示的疑问

最新推荐文章于 2024-06-26 09:58:38 发布
最新推荐文章于 2024-06-26 09:58:38 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： CSS HTML 文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64071349/article/details/125031063
版权
HTML 同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
CSS
8 篇文章 0 订阅
订阅专栏

如下图，按理说，我设置了 overflow-x:scroll;

应该会有水平滚动条来操作

但是出现的效果是 ：有水平滚动条，但它不能移动，出现效果与hidden类似

后来观看其他代码：看到要用white-space这一属性

 它的属性值为：

因此我需要用到nowrap属性值

这样才能让我的 文本 的全部内容在一行内全部显示，这时我的水平方向滚动条才会起作用

改正如下：

 

grin : (0~.~0)
关注
专栏目录
overflow-x: scroll;横向滑动详细讲解
diaopa4156的博客
11-06 3239
overflow-x: scroll;横向滑动（移动端使用详解） css3 ， ie8以上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib...
使用 sroll-snap-type 优化滚动
聚娃科技开发者博客
12-06 164
根据CSS Scroll Snap Module Level 1规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。 Tips：本文截的一些 Gif 图涉及容器滚动，效果不是很好，可以点进 Demo 里实际感受下。 sroll-snap-type 首先看看sroll-snap-type可能...
overflow-x:scroll失效
周18的碎碎念
12-08 9298
1.滚动内元素不可以使用浮动，需要display:inline-block 2.scroll-view需要设置 明确的宽 overflow:hidden; white-space:nowrap; overflow-x: scroll; 3.为解决安卓适配问题，我还加了 display: -webkit-box; <div class='scroll-view> <div>zff</div> <div>zff</div> <div>
display: flex下设置 overflow-x: auto不出现滚动条且子元素收缩宽度解决方案
最新发布
u011725256的博客
06-26 709
但是，如果你同时设置了 width 和 flex-basis，且容器有足够的空间，那么项目的大小可能会是两者中较大的那个（取决于其他因素，如 min-width、max-width 等）。flex 属性与 min-width/max-width 的关系：min-width 和 max-width 可以限制 Flex 子项的最小和最大宽度。flex-shrink 默认为 1：如果 Flex 子项的总宽度超过了容器，并且 flex-shrink 未被设置为 0，那么子项会缩小以适应容器。
overflow-x:scroll失效问题解决
xuan2717的博客
04-29 1995
overflow-x:scroll失效问题解决
解决使用 overflow-x: scroll 滚动条不显示问题
藕粉桂花糖糖糕的博客
12-03 1679
解决使用 overflow-x: scroll 滚动条不显示问题
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题...
sfkong31893189的博客
01-15 1195
web移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;完事！可拿设备去测的时候有趣了，Pc all browser正常，ios正常 ，android失效。泥马在android下效果与 overflow:hidden...
overflow:scroll无效
qq_21476953的博客
01-06 5919
可能是禁用了页面滚动: // 禁止浏览器滚动页面 let edit2d = document.querySelector(".edit2d"); edit2d.addEventListener("touchmove", e => { e.preventDefault(); }); <全文结束> ...
CSS之overflow
做一个开心的全栈工程师
07-07 2094
第1章 基本属性1.1overflow的五种取值 visible（默认） hidden scroll auto inherit 1.2overflow-x和overflow-y（IE8+）两种情况： 1.overflow-x和overflow-y值相同，则等同于overflow 2.overflow-x和overflow-y值不同，并且一个被赋予visible，另一个被赋予hidden、scro
微信小程序scroll-view滑不上去
07-28
5. 确保设置了 scroll-view 的样式 overflow：在 scroll-view 的样式中，确保设置了 overflow 属性为 auto 或 scroll，以便显示滚动条。 6. 检查是否存在其他元素的 z-index 值较高：如果有其他元素的 z-index 值较...
滚动锚定（Scroll Anchoring）- 让视口内容不再因视口上方 DOM 元素的高度变化而产生跳动...
weixin_33711647的博客
04-05 2689
不知道你有没有经历过这样的场景：当你打开一张“多图杀猫”的页面后，正一张图一张图边滚边看，在你刚准备定睛看某一张图的时候，这张图突然被它上面的内容挤到了视口下方，然后你赶紧把滚动条往下拉，试图追赶这张没看完的图，当你刚刚追上的时候，这张图又一次被挤到了你看不见的地方。 发生这种情况的原因是因为在很多场景下（比如论坛里），你没法事先知道一张图的高度，所以你没法事先给这张图占位，在网速不理想的情况下...
使用CSS隐藏元素滚动条的示例代码
11-21
如果希望在内容溢出时显示滚动条，可以将`overflow`设置为`auto`。例如： ```css .demo { overflow: auto; } ``` 要完全隐藏滚动条，可以将`overflow`设置为`hidden`，但这也将禁止内容的滚动： ```css .demo { ...
css:touch-action导致安卓无法滚动页面
weixin_34150830的博客
10-22 1893
前言 相信大家搜css touch-action很容易搜到一批文章，但感觉自己还是需要写下自己这这个过程中的一些探索经历。 之所以写，是因为单独去学知识点或者单独看一篇文章其实很简单的，难的是在自己实践中，因为一个问题找一个方案，然后又引起另外一个问题，而这个不断发现问题的过程非常低效，需要各种尝试和理解。 使用css touch-action的原因 在其官方的说明中：是否，以及以何种方式，给定...
overflow-x滑动失效问题
FineDust的博客
02-20 1141
CSS滑动样式overflow-x问题处理
pythonscrollbar布局_简单的python列表框+滚动条组合演示（实用性较强）-设置滚动条样式...
weixin_39922151的博客
12-05 700
该示例是一个简单的滚动列表框演示，用到两个组件，Listbox(列表框)和Scrollbar(滚动条)。最终效果是实现一个列表展示界面，界面包括水平和垂直滚动条，内容比较简单。效果如下：效果图全部代码如下：from tkinter import *class ScrolledList(Frame):def __init__(self,options,parent=None):Frame.__ini...
overflow-y:scroll在ie不生效
可小辉的博客
02-07 318
以上代码适用于 Firefox 和 Chrome，但 IE 根本不显示滚动条.知道如何解决这个问题。
overflow出不来游览器滚动条的问题
qq_40946374的博客
01-08 1992
overflow不显示滚动条是因为position的fixed属性
微信小程序中overflow:scroll失效的问题
Isaac_Play的博客
02-28 7466
因为公司业务需要要实现一个选择列表，点击列表时跳出选择框，然后点击选择，但是在出现列表过长时却发现overflow其实失效了，效果如下： .common-pop-table { padding: 0 30rpx; overflow: scroll; max-height: 70%; } 研究后发现，要实际的设置对应的那个维度的高度，wcss改成 .common-pop-table ...
移动端微信浏览器使用overflow：scroll属性实现横向滚动没效果
华山派developer的博客
06-07 1829
在写公众号网页时候，如果菜单过多的话，要实现左右滚动。然后列表内容实现上下滚动。就用了overflow-x和overflow-y的样式，结果在电脑浏览器测试时候完全没问题，但打包上传后，在微信里看上下是可以滚动的，左右完全没效果。在手机其他浏览器里正常没问题。 我是参考了这篇说在苹果浏览器中overflow不起作用的文章解决的，但实际上我的代码只是在微信浏览器上没效果，反而在safari浏览器里没问题。 解决方法： A：是父容器，加overflow样式的 C：是子容器，是具体显示需要滚动的内容。 因为需要它
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值