在做企业页面的时候，大部分页面都应该是活的，不应该写死，因为要从后台拿数据进行填充。而后台的数据是不确定的，有时候会让我们的容器撑得很大。这时候我们需要隐藏掉滚动条达到美观或者其他布局效果，隐藏掉单个方向滚动条，例如： 隐藏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 转换容量单位 实现ls -h功能

    功能1 把字节转换自适应转为其他单位(ls -h),超过1024投入高一级的区间,不足1024投入本级区间,如1000K是一个合理值,1030K就应该转换为1M,2050K应该转换为2M 功能2 把其 ...

  2. 【LeetCode每天一题】Length of Last Word(字符串中最后一个单词的长度)

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  3. cherry-pick时的add by us / both modified / delete by us /delete by themk

    简单来说: us=into , them=from 比如你将test分支的某个提交cherry-pick到master分支上,那么us就是master分支,them 就是test分支 参考: http ...

  4. Android adt-bundle 开发环境的搭建_windows

    本文完全拷贝的是:  https://www.jb51.net/article/87953.htm  的文章仅仅用于自己保存学习消息. Android开发环境有三种方式,分别是JDK+SDK+Ecli ...

  5. PHP开发微信公众号

    PHP开发微信公众号:配置和部署服务器及Token认证 https://zhuanlan.zhihu.com/p/28259840

  6. kylin对接hive实现实时查询

     前提: 安装kylin之前,需要安装hadoop2.0.hbase.hive,并且对版本有要求,可以参照官网链接 http://kylin.apache.org/cn/docs/install/in ...

  7. docker启动后忘记挂载nvidia-docker-volume的解决方法

    进入 docker 目录 删除 volumes 下的所有文件 重新启动docker 运行nvidia-docker run XXX 来生成volume 修改所有 docker目录下containers ...

  8. MySQL条件检索_WHERE

    MySQL使用WHERE命令来限定数据查询条件. 语法:SELECT 属性1,属性2 FROM 表名 WHERE 条件1 OR 条件2 AND 条件3 说明:WHERE同样适用于UPDATE.DELE ...

  9. 剑指offer（27）字符串的排列

    题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入描述:输入 ...

  10. 【2.0】SpringBoot连接MySql 8.0的url设置

    jdbc:mysql://localhost:3306/enterprise?useUnicode=true&amp&useSSL=false&amp&characte ...