1.单纯的一句代码：

 div ::-webkit-scrollbar {width: 0px;}//或者display:none

　　但是这代码最大的弊端就是只能在webkit内核的浏览器上进行显示，无法做Hack

2.

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <meta name="renderer" content="webkit">

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        html,

        body {

            height: 100%;

        }

        html {

            overflow: hidden;

        }

        body {

            overflow: auto;

            width: calc(100vw + 20px);

        }

        .page {

            height: 200%;

            border: 1px dashed;

            width: 100vw;

        }

    </style>

</head>

<body>

    <div class="page">

        <p>我是文字啊啊啊啊啊th</p>

        <p>我是文字啊啊啊啊啊th</p>

        <p>我是文字啊啊啊啊啊th</p>

        <p>我是文字啊啊啊啊啊th</p>

        <p>我是文字啊啊啊啊啊th</p>

        <p>我是文字啊啊啊啊啊th</p>

        <p>我是文字啊啊啊啊啊th</p>

        <p>我是文字啊啊啊啊啊th</p>

        <p>我是文字啊啊啊啊啊th</p>

    </div>

</body>

　　说说原理吧，首先是vw,vh这种css3单位不懂请百度，让body宽度是窗口宽度加上20px（浏览器滚动条差不多这个宽度），.page里面的宽度是100%视口也就是100vw，这样body的滚动条就被隐藏了（超出部分被html隐藏）。
优点：不用js（js必须页面加载完拿高度才准确）。
缺点：1、IE8不支持，2、移动端不用测试了，移动端滚动条没那么简单，3、overflow:auto;局部滚动在火狐浏览器滚动速度变慢不知道为什么。

如何使用css影藏滚动条的更多相关文章

  1. js控制TR的显示影藏

    在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,(div的影藏显示类似) 以下是一段选择是的按钮就显示身高和体重的文本框的代码.注意:ready方 ...

  2. ng指令控制一个元素的影藏的与显示几种方法的使用

    在ng中我们控制一个元素的显示与隐藏的方法: (1):ng-show=true/false 解释:ng-show使用的是display="block"/"none&quo ...

  3. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  4. 使用CSS实现无滚动条滚动

    我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放 ...

  5. nginx 为什么要反向代理 影藏后端 高效连接(给nginx,他自己返回) 端口冲突解决 多个服务

    nginx 为什么要反向代理  影藏后端   高效连接(给nginx,他自己返回)  端口冲突解决  多个服务 单机使用反向代理可以根据不同url匹配到不同站点   rsync 的工作原理和应用实例 ...

  6. CSS 实现隐藏滚动条同时又可以滚动（转）

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  7. 前端切图:CSS实现隐藏滚动条同时又可以滚动

    CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...

  8. 借助meta影藏顶部菜单

    1===>报错 Cannot find module 'webpack/lib/Chunk' 删除node_modules 然后重新下载 4==> 现在已进入页面,底部就有四个菜单,在点击 ...

  9. EBS 页面影藏“关于此页”

    EBS环境: R12.1.3 问题:要影藏EBS登录页面左下角的“关于此页” 方法: 修改的配置文件参数:FND:诊断 , 由 是 改为 否 个性化自助定义 ,由 是 改为 否参数说明:‘FND:诊断 ...

随机推荐

  1. 创建一个动态链接库 (DLL)，使用VS2010

    在本演练中,您将创建一个动态链接库 (DLL),其中包含可供其他应用程序使用的有用例程.使用 DLL 是一种重用代码的绝佳方式.您不必在自己创建的每个程序中重新实现这些例程,而只需对这些例程编写一次, ...

  2. 一款基于jquery固定于顶部的导航

    今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览   源码下载 实现的代 ...

  3. 【WPF/C#】使用BackgroundWorker实现多线程/异步操作

    做WPF时需要做一个异步加载时的Loading遮罩,搜Stackoverflow看到很多方法,看到了这个插件: BusyIndicator in the extended WPF Toolkit 同时 ...

  4. u-boot中网口处理--硬件部分

    1.  网口硬件方案: AT91SAM9G10 + DM9000CEP: DM9000CEP为MAC+PHY解决方案,与MCU链接通过8位或16位数据总线. 内部SRAM为16Kbyte. 2. DM ...

  5. hdu6199 gems gems gems dp+博弈

    /** 2017 ACM/ICPC Asia Regional Shenyang Online 解题报告 题目:hdu6199 gems gems gems 链接:http://acm.hdu.edu ...

  6. DataGridView使用技巧七：列顺序的调整、操作行头列头的标题

    一.列顺序的调整 设定DataGridView的AllowUserToOrderColumns为True的时候,用户可以自由调整列的顺序. 当用户改变列的顺序的时候,其本身的Index不好改变,但是D ...

  7. Ajax-ajax实例3-动态树形列表

    项目结构: 项目演示: 技术要点: 1.3.2 技术要点在基本原理的介绍中,了解到通过在父节点内动态创建子节点,并利用样式表缩进完成树形列表的基本框架.除了这一点外,还有下面一些问题需要考虑.1 ．将 ...

  8. 运行带distance field的Hiero

    从http://libgdx.badlogicgames.com/releases/下载zip包并解压,切换到解压后的目录,执行: java -cp gdx.jar;gdx-natives.jar;g ...

  9. jQuery EasyUI教程之datagrid应用-2

    二.DataGrid的扩展应用 上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息.本教程将教你如何创建一个CRUD 数据表格(datagrid). 为了让这些CRUD功能正常工 ...

  10. 给原型扩展一下tirm方法

    方便以后,直记录下来 <script type="text/javascript"> //给原型护展tirm方法 String.prototype.trim=funct ...