写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. Spring示例工程

    ---------------siwuxie095                                 创建一个基于 Spring IoC 的小程序的步骤:     建立 Spring 工 ...

  2. unreal3对象管理模块分析二

    上一篇主要记了UClass的创建,现在总结一下UObject的创建,可以从几个不同角度来理解. 从途径上看,可以根据UObject的构造函数来分个类: // Constructors. UObject ...

  3. 31、SAM文件中flag含义解释工具--转载

    转载:http://www.cnblogs.com/nkwy2012/p/6362996.html  SAM是Sequence Alignment/Map 的缩写.像bwa等软件序列比对结果都会输出这 ...

  4. Thinkphp的import使用方法

    Thinkphp的import使用方法主要有以下4种,在此记下以供查询.原文链接:http://www.jb51.net/article/51765.htm     感谢. 1.用法一 import( ...

  5. Maven核心知识

    什么是Maven? Maven是基于项目对象模型(POM), 可以通过一小段描述信息来管理项目的构建和文档的软件项目管理工具 目录结构如下 src main java package test jav ...

  6. 不重新编译安装php模块的方法

    如果你有下面两种经历: 如果php通过源码安装(php7),如果后来需要开启某个自带模块(例如ldap,snmp等),通常需要重新编译. 另外一些安装php模块的经历,例如redis,swoole,y ...

  7. 洛谷P5048 [Ynoi2019模拟赛]Yuno loves sqrt technology III(分块)

    传送门 众所周知lxl是个毒瘤,Ynoi道道都是神仙题 用蒲公英那个分块的方法做结果两天没卡过去→_→ 首先我们分块,预处理块与块之间的答案,然后每次询问的时候拆成整块和两边剩下的元素 整块的答案很简 ...

  8. bzoj2039: [2009国家集训队]employ人员雇佣(最小割)

    传送门 膜一下大佬->这里 不难看出这是一个最小割的模型(然而我看不出来) 我们从源点向每一个点连边,容量为他能带来的总收益(也就是他能对其他所有经理产生的贡献) 然后从每一个点向汇点连边,容量 ...

  9. mathjax;latex

    \lfloor $\lfloor$ \rfloor $\rfloor$ \sum_{i=1}^{n} $\sum_{i=1}^{n}$ \mu $\mu$ \mid $\mid$ \Leftright ...

  10. idea中导入githup项目

    转载大神: https://blog.csdn.net/m0_37630602/article/details/69950528