写web端页面的时候,总是会出现横向滚动条,即 X 轴滚动条,导致页面左右滑来滑去。

即使设置了 body,html {overflow-x:hidden;width:100%;} 也无法生效。

解决代码:

html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}

原文:https://blog.csdn.net/zx562602419/article/details/81293405 

内容参考自 张鑫旭大神的《小tip:CSS vw让overflow:auto页面滚动条出现时不跳动》

解决移动端浏览器页面 X轴横向滚动条问题的更多相关文章

  1. 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题

    原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...

  2. 解决移动端浏览器 HTML 音频不能自动播放的三种方法

    https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...

  3. 完美解决移动端H5页面的滑动穿透问题

    同事的分享,记录下来. 代码如下: css: body.modal-open { position: fixed; width: 100%; } js: // 兼容低版本 document.scrol ...

  4. 解决centos chrome浏览器页面中文显示为方框

    1.系统:centos 7 下载宋体文件:点击下载 把文件放到 /usr/share/fonts/simsun.ttc 依次执行如下命令 mkfontdirmkfontscalefc-cache -f ...

  5. fastclick.js解决移动端(ipad)点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  6. 利用Everything开启http服务测试移动端浏览器环境

    一.Everything 简介 Everything本身是一款小巧的文件搜索神器,可以快速的搜索电脑中的文件,速度非常快. 二.使用Everything的http服务 在做移动端浏览器页面时,有时需要 ...

  7. 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  8. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

  9. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

随机推荐

  1. 文件格式——fasta格式

    fasta格式 在生物信息学中,FASTA格式(又称为Pearson格式),是一种基于文本用于表示核苷酸序列或氨基酸序列的格式.在这种格式中碱基对或氨基酸用单个字母来编码,且允许在序列前添加序列名及注 ...

  2. 什么是消息循环,一个简单的win32程序如何运行?

    预备知识 1.什么是句柄? (HANDLE) 在win32编程中有各种句柄,那么什么是句柄呢? #define DECLARE_HANDLE(name) struct name##_ { int un ...

  3. iperf3

    1.安装 将下载得到的“iperf-3.1.3-win64.zip”文件解压缩,得到“iperf3.exe”和“cygwin1.dll”两个文件.将这两个文件复制到“%systemroot%”(大多数 ...

  4. idea中java项目增加module后,增加的目录(src)无法增加包(Package)

    在idea项目中,增肌model后,在项目根目录下增加src目录,右键发现无法增加包(Package). 仔细观察发现,新增加的src目录是棕色,而原先的src目录是浅蓝色的,见下图: 在src右键, ...

  5. Note: ENDBOX: Scalable Middlebox Functions Using Client-Side Trusted Execution

    ENDBOX enable secure networking by client-Side trusted execution. What ENDBOX is a scalable middlebo ...

  6. window下安装composer步骤(linux待研究)

    window下安装composer步骤--注意(安装完之后需要重启电脑才能生效) 转发:https://blog.csdn.net/wengedexiaozao/article/details/798 ...

  7. Machine Learning-KNN

    思路:如果一个样本在特征空间中的k个最相近的样本中大多数属于某个类别,则该样本也属于该类别: 这段话中涉及到KNN的三要素:K.距离度量.决策规则 K:KNN的算法的结果很大程度取决于K值的选择: I ...

  8. 强联通分量之kosaraju算法

    首先定义:强联通分量是有向图G=(V, E)的最大结点集合,满足该集合中的任意一对结点v和u,路径vu和uv同时存在. kosaraju算法用来寻找强联通分量.对于图G,它首先随便找个结点dfs,求出 ...

  9. 深入解析Android Design包——Behavior

    已经说过了,在AndroidDesign包中主要有两个核心概念:一是NestedScroll,另一个就是Behavior. 相比于NestedScroll这个概念来说,Behavior分析起来会难很多 ...

  10. 使用pods添加第三方的时候,出现ld: library not found for -lpop

    ld: library not found for -lpop 错误,是在使用pods添加第三方的时候,出现的编译错误,同时伴随着的是error: linker command failed with ...