写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. Hadoop的namenode和secondnamenode分开部署在不同服务器

    一.系统环境:  Hadoop 0.20.2.JDK 1.6.Linux操作系统 二.使用背景  网上关于Hadoop的集群配置,很多情况下,都是把namenode和secondnamenode部署在 ...

  2. Gulp的学习和使用

    Gulp是一种直观.自动化构建的工具. Gulp是基于Node和NPM,安装教程点这里. 什么是Gulp? Gulp使用了node.js的流控制系统,使其(Gulp)构建更快,因为它不需要将临时文件/ ...

  3. 5.Windows应急响应:挖矿病毒

    0x00 前言 随着虚拟货币的疯狂炒作,挖矿病毒已经成为不法分子利用最为频繁的攻击方式之一.病毒 传播者可以利用个人电脑或服务器进行挖矿,具体现象为电脑CPU占用率高,C盘可使用空间骤降, 电脑温度升 ...

  4. HDU 3915 Game (高斯消元)

    题意:有n堆石子,每个人只能从某一堆至少拿走一个,不能拿者败.问事先拿走某些堆的石子,使得先手必败. 析:将石子拆成二进制,未知数为1表示保留该堆石子,为0表示事先拿走该堆石子.最后求自由变元的数目, ...

  5. LeetCode: 455 Assign Cookies(easy)

    题目: Assume you are an awesome parent and want to give your children some cookies. But, you should gi ...

  6. ASP.NET控件之CompareValidator控件

    作用:对Textbox或者其他输入框进行比较验证: 属性:ControlToValidate:要验证的控件: ErrorMessage:错误提示信息: ControlToCompare:与此相比的控件 ...

  7. 洛谷P2380 狗哥采矿

    P2380 狗哥采矿 题目背景 又是一节平静的语文课 狗哥闲来无事,出来了这么一道题 题目描述 一个n*m的矩阵中,每个格子内有两种矿yeyenum和bloggium,并且知道它们在每个格子内的数量是 ...

  8. Spring MVC那点事儿

    自问自答 1 Spring MVC的启动原理? spring mvc是基于ioc容器的,因此需要先创建IOC容器,才能创建对应的spring mvc执行环境. IOC容器是通过ContextLoade ...

  9. iPhone摄影中的深度捕捉(WWDC2017-Session 507)

    507是深度媒体相关的概念层面的内容.主要为下面4个部分: Depth and disparity on iPhone 7 Plus Streaming depth data from the cam ...

  10. springboot和Druid整合配置数据源

    @Configuration public class DruidConfiguration { @ConfigurationProperties(prefix = "spring.data ...