浏览器纵向滚动条导致横向滚动条的出现及多出一段宽度

最新推荐文章于 2024-02-21 17:16:58 发布
最新推荐文章于 2024-02-21 17:16:58 发布
阅读量3.8k 收藏 7
点赞数 6
分类专栏： 前端 H5 文章标签： css html html5 web css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/earthOLtainanwan/article/details/108799690
版权

浏览器元素高度超出视口高度时，出现横向滚动条，并在宽度上多出一段距离

原因是： 出现的纵向滚动条也会占据浏览器视口的宽度，多出的那一段宽度就是纵向滚动条的宽度

例如下图
在这里插入图片描述
在这里插入图片描述
我这里导致的原因：CSS初始化文件中写死了宽度，导致当出现纵向滚动条时，原来在纵向滚动条出现的位置的部分图像被遮盖，为了显示那部分图像，只能出现横向滚动条拖动后显示
在这里插入图片描述

地球OL太难玩
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
用div+css解决出现水平滚动条问题
10-30
用div+css解决出现水平滚动条问题
jquery scroll()区分横向纵向滚动条的方法
10-26
主要介绍了使用jquery scroll()方法区分浏览器横向和纵向滚动条的方法,需要的朋友可以参考下
设置了 overflow-y 竖向滚动条时出现了横向滚动条
weixin_45194059的博客
07-30 1907
设置了 overflow-y 同时出现 横向滚动
解决滚动条出现会占用空间问题的三种方法
最新发布
qq_52700250的博客
02-21 1174
解决滚动条出现会占用空间问题的三种方法
干死该死的横向滚动条
夏2同学的博客
01-11 1360
一、情景描述 开发者小蒋按照1920*1080的分辨率进行开发，他写的所有元素的宽度都没有超过1920，但是却出现横向滚动条，小蒋百思不得其解，最终求教程序员大尤。 可能的问题原因： 任务栏左置，实际横向宽度只有1918 浏览器的竖向滚动条占了20px，横向宽度实际只有1900 二、解决办法 问题1：任务栏左置，实际横向宽度只有1918 当任务栏居左时，横向只有1918px。 2px被操作系统拿去做侧边栏感应了。 所以少了2px。 实践解决 右键—>任务栏设置-----> 调整至底部
element table 表格滚动水平滚动条会触发竖直滚动条的加载更多 的解决办法
kekexiaomayi的博客
08-13 725
一、问题场景：表格过长或过高时，用element固定表头和固定列出现滚动条，当竖直
flex纵向滚动条出现后,横向滚动条自动出现(转)
yfisaboy的专栏
06-15 5402
我在写一个module,放了很多组件,发现只要出现纵向滚动条之后,横向的也会出现,怎么也去不掉,苦恼了很久,终于在网上找了解决办法, 为了让更多的朋友看到,便转到自己的博客中 我这篇文章的来源 http://edu.gamfe.com/tutor/d/24844.html 当你把容器的宽度调为100%后 ，vertical
IE6下出现横向滚动条问题的解决方案
weixin_30834019的博客
04-05 145
当我们在css样式设置为html {overflow-y:auto;}时，在ie7以上版本应用时不会有问题，可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现。究其原因是在ie6下，当内容过多出现垂直滚动条时，此时页面的宽度为其本来宽度加上滚动条的宽度，导致页面宽度超过100%，而出现横向滚动条，在ie7+浏览器中，会自动的识别滚动条，页面宽度为内容的宽度加上滚动条的宽度等于10...
vue + better 使用纵向滚动后，横向滚动出现问题解决方案
weixin_47409897的博客
12-21 349
目录vue + better 使用纵向滚动后，横向滚动出现问题解决方案使用 vue + better 使用纵向滚动后，横向滚动出现问题解决方案 左右滚动这个table，使用了better-scroll之后，但是横向滚动出现异常，异常需要设置以下 使用 html <div class="table_wrap" ref="table_wrap"> // 外层 套一个可以滚动的区域 设置宽 <div class="table_scroll">
关于elementui，el-table标签使用了纵向滚动条以后会出现横向滚动条的思考
qq_52168726的博客
12-27 2193
在使用el-tab-pane和el-table结合的时候需要纵向滚动条但是不需要横向滚动条需要的实现的效果如下 但是却出现了 因为在点击的时候页面重新渲染了没有及时给table进行设置颜色，需要给table设置颜色才可以 设置背景颜色是透明就可以进行解决 ...
div横向滚动条_纵向滚动条对横向滚动条的影响
weixin_39849239的博客
11-29 396
GUI编程中，往往有这样一个场景，在一个长、宽固定的组件中，显示一系列的子组件。我最近发现了各平台在这种场景下，对纵向、横向滚动条处理的一些差异，分享出来给大家。比如在网页上构建这样一个组件：对应的代码如下：<先看横向:父元素的宽度是200，每一个子元素的宽度也都是200，所以即使父元素指定了overflow:auto,也不会出现横向滚动条。再看纵向：父元素的高度是220，每个子元素的高度是...
textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法
09-25
有些新手朋友可能对去掉textarea横向或纵向滚动条不是很擅长，本文将详细介绍，需要了解的朋友可以参考下
iframe在IE6下出现横向滚动条的解决方案
09-22
最近的项目中，遇到ie6下当iframe出现纵向滚动条时同时会出现横向滚动条。分析了代码，大致的原因是iframe中的页面有相对body的样式包含width:100%的元素。
QTreeView 一个竖直滚动条引起的问题
程序员Link
12-04 1555
一 问题描述 一般情况，当QTreeView的item展开后，数据较多时会展示滚动条，如果item上有右对齐的显示文本，在item展开/收起变化时，竖直滚动条会呈现显示/隐藏变化，右对齐文本会“左右移动”，视觉效果差。原因是滚动条出现后“挤占了”item的空间。 Windows下有该问题，Mac下没有问题。 二 问题展示Demo 环境Win10，Qt5.9.2 新建UI工程，在UI拖入一...
使用html2canvas将html转pdf，由于table表的水平和竖直有滚动条导致显示不全（或者有空白）
qq_42192641的博客
10-16 1727
使用html2canvas将html转pdf，由于table表的水平和竖直有滚动条导致显示不全（或者有空白）
CSS 隐藏竖直y滚动条 设置横向x滚动条自动显示 overflow-x: overflow-y:
YDOOK
08-13 1718
选择器{ overflow-x: auto; overflow-y: hidden; }
只横向滚动css,CSS：垂直滚动两个绝对定位的div，而水平滚动条保持固定
weixin_36231030的博客
08-03 546
我有两个absolute ly定位元素彼此相邻，是完全相同的高度，和右边的一个可能有水平溢出。当存在水平溢流我想上div(并且只有div)滚动条在该div的底部，同时既divs继续时也有垂直溢出到一起垂直滚动保持固定。问题是我想让左边的div在它的位置上保持固定。许多现代的文本编辑器都有这个功能(注意底部的滚动条和包含在左边的列中的行号)：之前滚动： 滚动后水平对齐方式： 垂直滚动后： 左边的行号...
解决移动端html页面出现X轴横向滚动条问题
m0_52813455的博客
05-06 3227
最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站，写完后发现 WAP 端总是会出现横向滚动条，也就是 X 轴滚动条，导致 WAP 端页面左右滑来滑去，很是令人蛋疼，即使设置了 overflow-x： hidden和 width:100% 也无法去除，通过各种途径寻找解决方法，最终在 张鑫旭 大神的一篇文章里找到了最终解决方法，在这里记录一下防止之后自己用得到时还需要重新找，也为那些同样有这方面问题的童鞋提供方便。 出现这种问题的主要原因就是，由于内容较多导致出现Y轴滚动条，占用了页面
爬虫——Selenium 处理滚动条（15）
小蜗Leon的博客
07-16 661
Selenium 处理滚动条 selenium并不是万能的，有时候页面上操作无法实现的，这时候就需要借助JS来完成了 当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。滚动条是无法直接用定位工具来定位的。selenium里面也没有直接的方法去控制滚动条，这时候只能借助J了，还好selenium提供了一个操作js的方法:execute_script()，可以直接执行js的脚本 一. 控制滚动条高度 1.1滚
css 怎么设置滚动条的高度和宽度 比如横向滚动设置高度 纵向滚动设置宽度
05-30
要设置滚动条的高度和宽度，您可以使用 CSS 中的 `::-webkit-scrollbar` 选择器。下面是一个示例： ```css /* 横向滚动条样式 */ ::-webkit-scrollbar { height: 10px; /* 设置高度 */ width: 100%; /* 横向滚动条宽度默认是100% */ } /* 竖向滚动条样式 */ ::-webkit-scrollbar-vertical { width: 10px; /* 设置宽度 */ height: 100%; /* 竖向滚动条高度默认是100% */ } ``` 在上面的示例中，我们使用了 `::-webkit-scrollbar` 选择器来选择滚动条，然后使用 `height` 和 `width` 属性来设置滚动条的高度和宽度。另外，我们还可以使用 `::-webkit-scrollbar-vertical` 选择器来选择竖向滚动条，然后使用 `width` 和 `height` 属性来设置滚动条的宽度和高度。 请注意，这种方法只适用于 WebKit 浏览器（例如 Chrome、Safari 等），对于其他浏览器可能不起作用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值