写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. 项目一:第五天 1、区域数据(pinyin4j-简码,城市编码) 2、Web层代码重构(model对象,分页代码提取) 3、区域分页查询 3、分区添加功能 4、定区管理管理-添加,分页

    Service: /** * @Description: 1.保存定区  2.让分区关联定区 * 对象三种状态 1.持久态(被session管理对象-一级缓存中有对象) 2.托管态(有OID标识,数据 ...

  2. hibernate&nbsp;hql&nbsp;查询指定…

    以数组的形式抛出,前台页面就要把它当成一个数组来处理 以对象抛出,就要当成一个对象来处理. 在JSP页面使用标签时一定要注意这点. 版权声明:本文为博主原创文章,未经博主允许不得转载.

  3. 如何设置 Windows 默认命令行窗口大小和缓冲区大小

    关键字: 命令行不能全屏 命令行最大化只有一半屏幕 命令行 字体 背景 颜色 解决方案:http://unmi.cc/save-windows-command-size/ 简要说明: win+r,输入 ...

  4. redis系列:通过文章点赞排名案例学习sortedset命令

    前言 这一篇文章将讲述Redis中的sortedset类型命令,同样也是通过demo来讲述,其他部分这里就不在赘述了. 项目Github地址:https://github.com/rainbowda/ ...

  5. “FreeTextBox”控件使用——Word编辑器

    前言 在敲牛腩新闻发布系统时,添加新闻修改新闻的时候遇到了Word编辑器控件.它是引用了第三方控件,下面关于怎么引用该控件及其一些简单的使用方法进行分析. 内容 在网上找的该插件"FreeT ...

  6. 洛谷P1342 请柬

    P1342 请柬 题目描述 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院,尤其是古色古香的喜剧片.他们已经打印请帖和所有必要的信息和计划.许多学 ...

  7. Oracle的RBO和CBO

    Oracle的优化器有两种优化方式,即基于规则的优化方式(Rule-Based Optimization,简称为RBO)和基于代价的优化方式(Cost-Based Optimization,简称为CB ...

  8. NodeJS什么都能做,为什么还要JAVA?

    这张图看起来简单而且很好理解,但没尝试过,会有很多疑问. SPA模式中,后端已供了所需的数据接口,view前端已经可以控制,为什么要多加NodeJS这一层? 多加一层,性能怎么样? 多加一层,前端的工 ...

  9. [转]SAP一句话入门SD模块

    SD是Sales and Distribution的简称.在SAP系统中,销售与分销模块处在供应链下游,关注从客户订单到向客户收款的全过程. SD模块中的Sales好理解,而Distribution却 ...

  10. @SessionAttribute使用详解

    @SessionAttribute使用详解   @ModelAttribute注解作用在方法上或者方法的参数上,表示将被注解的方法的返回值或者是被注解的参数作为Model的属性加入到Model中,然后 ...