overflow：scroll滚动条可以拉但是不能滚动

最新推荐文章于 2024-05-24 16:46:52 发布
最新推荐文章于 2024-05-24 16:46:52 发布
阅读量2.8k 收藏
点赞数
分类专栏： css 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45804281/article/details/128217636
版权

这时候要注意是不是外侧有大的滚动条影响了，如果影响了可以通过布局去掉外侧的滚动条（可以使用overflow：hidden），里面对应的就可以滚动了

如果外侧的滚动条不能去掉，可以改变滚动条的位置，原先默认在右侧，设置在左侧可以让用户手动拉滚动条
设置滚动条位置

  overflow: auto;
  direction: rtl;
  
  但是设置direction要注意，会影响文字的排列方向

亲测有效！

肉肉心很软
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css使两个盒子并列_CSS的盒子模型和浮动，都在这了
weixin_39616222的博客
11-20 1034
点关注，不迷路，每天分享大量前端知识css中的盒子模型 css处理网页时，他认为每个元素都包含在一个不可见的矩形盒子 盒子是由 内容区，内边距(padding)，边框，外边距(margin)组成在浏览器中，其默认样式中存在一些body等元素存在的默认样式，比如一些外边距，内边距等,它的这些默认样式所以在编写样式之前我们需要将默认样式取消掉，在书写代码时在style中引入下面的reset.css文件...
div--可滚动但不显示滚动条
路漫漫的博客
04-29 1467
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>可滚动但...
css改变滚动条样式
aaa1222312的博客
07-09 415
#show1{ overflow-x: hidden; overflow-y: hidden; } #show1 ::-webkit-scrollbar { width: 5px; } #show1 ::-webkit-scrollbar-track { background-color: r...
overflow:scroll不生效解决
最新发布
qq_44792224的博客
05-24 290
这个组件里面实在是包裹太多层了，得找到离内容层最近的那层包裹层设置overflow才有效。在给组织架构组件的外框设置overflow:scroll的时候不生效，没有显示滚动条。找到离内容层最近的那层包裹层设置overflow。
解决使用 overflow-x: scroll 滚动条不显示问题
藕粉桂花糖糖糕的博客
12-03 1263
解决使用 overflow-x: scroll 滚动条不显示问题
css中overflow属性失效，页面始终不能滚动显示溢出的内容
weixin_51248307的博客
01-10 3212
如果overflow设置正确，出现这种问题大抵是因为position属性的设置为了fixd，这导致页面中的内容相对于页面是一定的，包括溢出的内容，他也在页面的某一个位置。而页面滚动本质上页面这个panel没有变，变的是显示的内容，所以既然元素是fix的，那滚动就相当于要破坏这个fixd，所以导致overflow失效。
div可滚动但不显示滚动条
m0_50312157的博客
08-15 1552
box {
[css] 遇到overflow: scroll不能平滑滚动怎么解决？
歌谣的博客
02-21 1302
[css] 遇到overflow: scroll不能平滑滚动怎么解决？ ipone 上解决方法是这样的， -webkit-overflow-scrolling: touch; 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
CSS H5 移动端开发 overflow: scroll 不显示滚动条问题（ios 暗黑模式不生效）
RosaChampagne的博客
05-26 6527
在做H5的开发时，需求要求显示滚动条，但是加上overflow: scroll;不起作用，在电脑上调试是没有问题的，但是在真机上不显示滚动条。 于是采用手动添加的方式解决，但是这种方式在IOS的暗黑模式下是不生效的，因为我的这个页面背景是白色，而在IOS的暗黑模式下，滚动条也是白色，只有深色背景可以看见滚动条。 ​ .article-content { max-height: 6.4rem /* 480/75 */; overflow: scroll; -webkit-overfl.
better-scroll无法滚动
pullgo的博客
01-19 895
总结一下目前为止碰到的better-scroll无法滚动的问题。 12遇见better-scroll(以下简称：BS)无法滚动，可从两方面去考虑。 一是层级关系出错，二是计算高度出错。1，层级关系BS的基本结构是：一个wrapper层，一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。div class="wrapper"> div
css 设置overflow:scroll 滚动条的样式
01-19
css 设置overflow:scroll 滚动条的样式 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-...
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
09-25
或者更简洁地，使用`overflow: auto`通常也能达到相同的效果，因为浏览器会自动隐藏不需要的滚动条： ```css <div class="your-class" style="overflow: auto;"> ``` 对于Internet Explorer的兼容性问题，如果是...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
描述中提到的“故事背景”是一个开发者在开发过程中遇到的问题，他们使用了`overflow: scroll`来创建可滚动的内容区域，但在iOS设备上，滚动体验并不理想，出现了卡顿。作者希望通过分享解决办法来总结经验。 标签...
微信小程序scroll-view的滚动条设置实现
10-15
本文主要探讨了如何在微信小程序的 `scroll-view` 组件中设置滚动条的样式和行为，尤其是在 Android 和 iOS 平台上的差异处理。 首先，微信小程序的官方文档并未直接提供控制 `scroll-view` 滚动条显示和样式的属性...
overflow（横坐标）不出现滚动条的问题（max-content）
PaoMianXianShen的博客
12-22 664
如图是改好的查看了一下原因，考虑是内部el-tree的宽度被限制死了，和el-popover的宽度一致，导致没办法触发横向滚动条。
overflow：auto出现滚动效果不显示滚动条
weixin_47586598的博客
06-01 1038
overflow：auto 子元素超过父元素高度或者宽度时会出现滚动条（需要设置高度和宽度），当我这么设置之后出现了滚动效果却没有滚动条。
解决H5在移动端overflow:scroll滚动条默认不显示和滚动后消失的问题
JulyNight的博客
05-17 6704
今天在工作中，遇到一个关于overflow滚动的问题，我在使用了overflow:scroll进行滚动时，滚动后滚动条自动消失了，需求是需要保留让它一直都在，下面的代码意思是重新设置滚动条的样式 .wf-detailScroll{ overflow-x: scroll; -webkit-overflow-scrolling: touch; } .wf-detailScroll::-webkit-scrollbar-track-piece { backgr
iOS Safari上overflow: scroll无法滑动解决
MichaelAn的博客
02-13 1416
iOS Safari上overflow: scroll无法滑动解决 问题描述 此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto(或overflow-y: scroll / auto)，内部子元素是动态大小(例如较大的svg docume...
探究ios -webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug
那谁家的博客
08-28 7382
探究ios -webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug 最常见的例子就是， 在safari上，使用了-webkit-overflow-scrolling:touch之后，页面在上下边界处偶尔会卡住不动。 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。 通过动态添加内容撑开容器，结果根本不能滑动的bug。 在网...
overflow:scroll滚动条失灵
04-01
如果overflow:scroll滚动条失灵，可能是以下原因之一： 1. 未设置固定高度：在使用overflow:scroll时，容器需要设置固定高度，否则滚动条将无法正常工作。 2. 内容大小不足容器高度：如果容器内的内容大小不足容器高度，滚动条将不会出现。可以通过添加更多的内容或者设置最小高度来解决此问题。 3. 使用了position属性：如果容器使用了position属性，滚动条可能会失灵。可以尝试使用其他布局方式，如flexbox或grid。 4. 浏览器兼容性问题：某些浏览器可能不支持overflow:scroll，或者可能存在一些兼容性问题。可以尝试使用其他属性或者JavaScript库来实现滚动条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值