在做企业页面的时候，大部分页面都应该是活的，不应该写死，因为要从后台拿数据进行填充。而后台的数据是不确定的，有时候会让我们的容器撑得很大。这时候我们需要隐藏掉滚动条达到美观或者其他布局效果，隐藏掉单个方向滚动条，例如： 隐藏Y轴滚动条 overflow-Y :hidden 但这样，会让我们的滚动元素变得不可滚动。百度测试了一下，以下该伪类可以实现既隐藏掉滚动条，又不会影响元素的滚动/滑动。这里的隐藏属于 display:none 类似效果，是不会影响布局的。如图：

css隐藏滚动条依旧可以滚动的更多相关文章

  1. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

  2. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

  3. CSS实现隐藏滚动条并可以滚动内容

    方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...

  4. css隐藏滚动条

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  5. css 隐藏滚动条

    如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...

  6. 纯css实现隐藏滚动条仍可以滚动

    移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...

  7. 如何让css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

  8. css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

  9. 如何使用CSS隐藏滚动条并且兼容大部分浏览器

    隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari. 如下demo: Content 1 Content 1 Content 1 Conte ...

随机推荐

  1. Chrome调试WebView时Inspect出现空白的解决方法(使用离线包不Fan墙）

    起因 使用HTML5开发Android应用时,少不了调试WebView.做前端的还是习惯Chrome的开发者工具,以前都是输入Chrome://inspect就可以调试WebView了,太方便了. 最 ...

  2. JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向

    本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...

  3. 一些sql优化原则

    1.我们在设计表的时候,尽量让字段拥有默认值,尽量不要让字段的值为null. 因为,在 where 子句中对字段进行 null 值判断(is null或is not null)将导致引擎放弃使用索引而 ...

  4. 配置cron定时任务

    题:配置一个 cron 任务用户 natasha 必须配置一个定时执行任务,每天在本地时间 14:23 时执行命令* /bin/echo hiya 答: # 方法1 # su - natasha # ...

  5. Html 符号

    Html  符号 往网页中输入特殊字符,需在html代码中加入以&开头的字母组合或以&#开头的数字. 下面就是以字母或数字表示的特殊符号大全.   常用 < < 小于号或显 ...

  6. 【题解】Luogu P2057 [SHOI2007]善意的投票

    原题传送门 我们一眼就能看出这是一道最小割的题 我们设不睡觉这种状态为S,睡觉这种状态为T 对于每个人,如果不想睡觉,就从S向这个人连流量为1的边,否则,就从这个人向T连流量为1的边 对于每一对朋友, ...

  7. ant_任务的含义与使用

    任务是一段可执行的代码.任务可以具有多个属性,每个任务都具有共同的结构.任务常见结构由名称,属性等组成. 任务配置结构示例: <task-name attribute1 = "valu ...

  8. 再谈git和github-深入理解-3

    git tag -a 和 -m的区别? -a是 注解 是单词 "annotate"的意思 , 表示 "给标签一个名字, 标签名 -m 是创建标签时的消息备注 git ta ...

  9. Python入门 序列章

    内置函数range range([start,] stop[, step]) 第一个参数表示步长(默认为0),第二个参数表示终止值(结果中不包括这个值),第三个参数表示步长(默认为1, 实验发现不能用 ...

  10. P3181 [HAOI2016]找相同字符

    思路 广义SAM 把两个字符串建成广义SAM,然后统计两个SAM中相同节点的endpos大小乘积即可 记得开long long 代码 #include <cstdio> #include ...