在做企业页面的时候，大部分页面都应该是活的，不应该写死，因为要从后台拿数据进行填充。而后台的数据是不确定的，有时候会让我们的容器撑得很大。这时候我们需要隐藏掉滚动条达到美观或者其他布局效果，隐藏掉单个方向滚动条，例如： 隐藏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. Python基础(七) python自带的三个装饰器

    说到装饰器,就不得不说python自带的三个装饰器: 1.@property   将某函数,做为属性使用 @property 修饰,就是将方法,变成一个属性来使用. class A(): @prope ...

  2. .net core 配置

    .net core 配置包括很多种 例如内存变量.命令行参数.环境变量以及物理文件配置和自定义配置 物理文件配置主要有三种,它们分别是JSON.XML和INI,对应的配置源类型分别是JsonConfi ...

  3. HDU 2874 Connections between cities(LCA Tarjan)

    Connections between cities [题目链接]Connections between cities [题目类型]LCA Tarjan &题意: 输入一个森林,总节点不超过N ...

  4. LinQ各种方式查询、组合查询、IQueryable集合类型

    1.模糊查询(包含) Repeater1.DataSource = con.car.Where(r =>r.name.Contains(s)).ToList(); 2.开头查询 Repeater ...

  5. mybatis中的foreach方法

    select  t.service_id, t.prod_id, t.prod_name, t.prod_type, t.buss_type, t.pricing_fee, t.detail from ...

  6. 《CSS世界》读书笔记（六）

    <!-- <CSS世界> 张鑫旭著 --> min-width/max-width和min-height/max-height min-width/max-width出现的场景 ...

  7. idea 报错 ：error:java:Compilation failed:internal java compiler error

    当使用Tomcat运行项目时报错 翻译一下是 错误:Java:编译失败:内部Java编译器错误 这样看来更不理解了 其实原因是Java的版本不一致 查看项目的jdk版本是否一致: file----pr ...

  8. 内置函数filter()和匿名函数lambda解析

    一.内置函数filter filter()函数是 Python 内置的一个高阶函数,filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回由符合条件迭代器 ...

  9. Bootstrap3基础 table-condensed 表格中的单元格紧凑一些

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  10. Kubernetes 路由问题&网络问题

    error 信息: kubectl 获取node的host地址 kubectl get pods -n $namespace -o wide 或者在Kubernetes的service中进行查看 ku ...