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. IDFA和IMEI

    这里有一些解释: https://www.zhihu.com/question/38856446

  2. C/C++函数指针声明

    前天看APUE,看到signal的声明竟然是 void (*signal(int,void(*)(int)))(int); 初看下面,还真是看不出这是啥意思.道行太浅,仅仅能看到这样的函数指针 voi ...

  3. 《机器学习实战》基于朴素贝叶斯分类算法构建文本分类器的Python实现

    ============================================================================================ <机器学 ...

  4. hdu5301(2015多校2)--Buildings(构造)

    Buildings Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Tota ...

  5. tomcat的一些简单配置

    一.管理tomcatusernamepassword conf文件夹下,tomcat-users.xml <span style="font-size:24px;">& ...

  6. HTML基础第八讲---序列卷标

    转自:https://i.cnblogs.com/posts?categoryid=1121494 什么叫做序列卷标?其实,这是一个大家都蛮熟悉的东西,只是在网页中换个名称来称呼罢了,序列卷标的功能在 ...

  7. python报错Nonetype object is not iterable

    https://www.cnblogs.com/zhaijiahui/p/8391701.html 参考链接:http://blog.csdn.net/dataspark/article/detail ...

  8. 16、cgminer学习之:popen函数和system函数详解(执行系统命令)

    1.popen函数我们先用man指令查一下popen函数: 函数说明: (1)popen()会调用fork()产生子进程,然后从子进程中调用/bin/sh -c来执行参数command的指令. (2) ...

  9. Mongodb总结6-数据库启动、停止、备份等命令

    #启动Mongodb默认启动,需要在/data/db,Windows下对应的目录是Mongod.exe所在磁盘分区的根目录,例如Mongodb存放在D:/Mongodb,那么对应的路径就是D:/dat ...

  10. android开发设计辅助工具整理

    1.Button设计工具button设计