方法一:

计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码:

<div class="outer-container">
<div class="inner-container">
......
</div>
</div>

 

.outer-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}

方法二:

使用三个容器包围起来,不需要计算滚动条的宽度,该代码最早是在Microsoft博客上看到的,跟我上面的思路差不多,只不过人家里面又加多了一个盒子,将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动,代码如下:

<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}

方法三:

css隐藏滚动条,同时该文章还分享了一种通过CSS隐藏滚动条的方法,不过这个方法不兼容IE,做移动端的可以使用。那就是自定义滚动条的伪对象选择器::-webkit-scrollbar

chrome 和Safari

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

转自大佬文章:GO>>>

CSS实现隐藏滚动条并可以滚动内容的更多相关文章

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

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

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

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

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

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

  4. CSS 实现隐藏滚动条同时又可以滚动(转)

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

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

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

  6. CSS怎么隐藏滚动条(三种方法)

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

  7. CSS 实现隐藏滚动条同时又可以滚动

    方法1: 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE. /* for Chrome */ .content::-webk ...

  8. css隐藏滚动条依旧可以滚动

    在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...

  9. css 如何隐藏滚动条

    原理: 把滚动条设为完全透明: /* 设置滚动条的样式 */::-webkit-scrollbar { width: 12px;} /* 滚动槽 */::-webkit-scrollbar-track ...

随机推荐

  1. el-upload上传列表实现 展开 收起

    # el-upload上传列表实现 展开 收起 #### 无图言*,所以先上最终效果图(想参考代码的可以直接滑到最后) ### 具体实现思路 注意: 每个人的项目环境以及需求,都不尽相同,所以这里仅仅 ...

  2. 在Excel中当遇到多个对象的目标值都不同时,如何快速设置条件格式突出未达标的对象

    1.选择实际值的一个单元格,选择条件格式,新建规则,选择图中选项. 2.这里选择大于,然后选择对比的单元格.选择需要的格式确定.(因为要对比的目标值不同,所以需要给单元格去掉绝对引用,也就是$符号). ...

  3. Unity触发碰撞

    原文链接:Unity触发碰撞介绍 3D触发器与碰撞器 触发信息检测: 1.MonoBehaviour.OnTriggerEnter(Collider collider)当进入触发器 2.MonoBeh ...

  4. uniapp uni.navigateTo 传值传对象

    uni.navigateTo({ url: '/pages/details?obj='+ encodeURIComponent(JSON.stringify(item)) }); 接收: onLoad ...

  5. hadoop学习(一)环境的搭建

    1.安装几台Linux虚拟机.安装的过程就不赘述了,网上教程很多.win7系统上装了一个VMWare,因为一些原因,VMWare版本不是最新的,是VMWare7.1版本,由于VMWare版本不高,所以 ...

  6. 各种电子书、pdf

    剑指offer第二版:  链接:https://pan.baidu.com/s/1ABn3p9wY_kiQUzDRefZUqA  提取码:d30v 网络是怎样连接的:  链接:https://pan. ...

  7. 三分钟掌握共享内存 & Actor并发模型

    吃点好的,很有必要.今天介绍常见的两种并发模型: 共享内存&Actor 共享内存 面向对象编程中,万物都是对象,数据+行为=对象: 多核时代,可并行多个线程,但是受限于资源对象,线程之间存在对 ...

  8. java03类与对象相关问题

    1.使用类的静态字段和构造函数,可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向他查询"你已经创建了几个对象" 1 package 第四五周; 2 3 public ...

  9. 框架学习系列 mybatis mapper映射文件之输出映射

    1: mapper映射文件输出映射(输入类型) 2:resultType的使用 3:resultMap的使用 3:总结&下节预告 本文是<凯哥陪你学系列-框架学习之mybatis框架学习 ...

  10. 10、Java——内部类

    ​  1.类中定义类 (1)当一类中的成员,作为另外一种事物的时候,这个成员就可以定义为内部类. (2)分类:①成员内部类 ②静态内部类 ③私有内部类 ④局部内部类 ⑤匿名内部类 ⑥Lambda表达式 ...