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

原始功能:

图片发自简书App

添加伪类之后的功能:

图片发自简书App

完整demo如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
::-webkit-scrollbar {display:none}
</style>
</head>
<body>
<div style=" width:200px; height: 200px; overflow-y: scroll;">
11111</br>
11111</br>
11111</br>
11111</br>
11111</br>
11111</br>
11111</br>
11111</br>
11111</br>
11111</br>
11111</br>
</div>
</body>
</html>

缺点,不兼容IE

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
福利二:微信小程序入门与实战全套详细视频教程


领取方式:
如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!

原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知

90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

前端切图:CSS实现隐藏滚动条同时又可以滚动的更多相关文章

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

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

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

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

  3. 前端切图神器-cutterman

    之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...

  4. 前端切图相关ps技术

    标签(空格分隔): 前端切图 复制图层到一个新的ps文件 对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置), ...

  5. 前端福利之overflow-scrol 怎么隐藏滚动条(转)

    最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题. 对于隐藏滚动条,我们最常用的方法首先是: 1.使用以下CSS可以隐藏滚动条: .container::-webkit-scroll ...

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

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

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

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

  8. 前端切图实战(PSD设计稿转化为前端)

    课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...

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

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

随机推荐

  1. Scala入门到精通——第二十九节 Scala数据库编程

    本节主要内容 Scala Mavenproject的创建 Scala JDBC方式訪问MySQL Slick简单介绍 Slick数据库编程实战 SQL与Slick相互转换 本课程在多数内容是在官方教程 ...

  2. Activity启动过程源代码分析

    事实上写分析源代码文章总会显得非常复杂非常乏味,可是梳理自己看源代码时的一些总结也是一种提高. 这篇博客分析下Activity启动过程源代码,我会尽量说得简单点. 个人的观点是看源代码不能看得太细,否 ...

  3. 阿里云部署Docker(3)----指令学习

    通过上两节的学习http://blog.csdn.net/minimicall/article/details/40119177 和http://blog.csdn.net/minimicall/ar ...

  4. Android实践之ScrollView中滑动冲突处理

    转载注明出处:http://blog.csdn.net/xiaohanluo/article/details/52130923 1. 前言 在Android开发中,假设是一些简单的布局.都非常easy ...

  5. LaTeX indicator function(指示函数)(\mathbb {1} 不起作用)

    问题说明: \mathbb字符的空心化显示仅对字符有效,对数字无效. 解决方法: 使用 bbm 包 \documentclass{article} \usepackage{bbm} \begin{do ...

  6. 添加asp.net mvc到现有的asp.net web form 应用程序

    前言 asp.net mvc的前一版本为asp.net web Form(Asp.net mvc之前称为asp.net),其第一个版本与2002年年初发布.asp.net web form 属于.ne ...

  7. 【Codeforces Round #443 (Div. 2) C】Short Program

    [链接] 我是链接,点我呀:) [题意] 给你一个n行的只和位运算有关的程序. 让你写一个不超过5行的等价程序. 使得对于每个输入,它们的输出都是一样的. [题解] 先假设x=1023,y=0; 即每 ...

  8. SpringMVC实战(三种控制器方式)

    1.前言 上篇博客着重说了一下SpringMVC中几种处理映射的方式,这篇博客来说一下SpringMVC中几种经常使用的控制器.  2.经常使用控制器 2.1 ParameterizableViewC ...

  9. Windows中DLL文件的意义及其作用

    Windows中DLL文件的意义及其作用 DLL是Dynamic Link Library的缩写,意为动态链接库.DLL文件即动态链接库文件,是一种可执行文件,它允许程序共享执行特殊任务所必需的代码和 ...

  10. Oracle以系统管理员的方式登录失败

    解决方法: 因为SYS是在数据库之外的超级管理员,所以我们在登录的时候输入sys后在输入命令:password as sysdba 就可以!例如:输入口令: m1234 as sysdba 参考文章 ...