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. android插件式开发资料整理

    1.DL : Apk动态载入框架 2.android中的动态载入机制

  2. CSS3制作W3cplus的关注面板

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  3. 14.inline与namespace使用

    #include <iostream> using namespace std; namespace all { //inline作用为默认调用 inline namespace V201 ...

  4. 96.udp通信

    运行截图 客户端 创建客户端套接字,用于创建UDP通信 SOCKET socket_client; 创建UDP通信 socket_client = socket(AF_INET, SOCK_DGRAM ...

  5. ios系统和某些移动端background-attachment:fixed不兼容性

    固定背景不动:background-attachment:fixed; ios系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了, ...

  6. 宏的使用 extern

    声明全局变量使用的技术. 有些时候C语言的一些条条框框就像语法.学会C语言就是学会了语法. 但是语法怎样使用就又是另一回事了. 我希望自己能多学习一些技巧,而不是一些固定的C语言语法. 这篇文章真的很 ...

  7. 2019年Angular7——安装搭建路由

    Angular 中文官方:https://www.angular.cn/ 为什么要看Angular?我也不知道,因为公司有个Angular的项目要维护.听说Angular的版本已经到7了.以前没怎么玩 ...

  8. P2P平台的"我要借款"功能,是否需要上传借款人的相关资料

     P2P平台的前端系统,一般都会有"我要借款"这个功能.有的平台,非常重视这个功能, 把它作为主要菜单的其中一项.有的把它看得相对次要,放在顶部Top栏中. 毕竟P2P平台,其实主 ...

  9. iproute2交叉编译

    测试zynq+ramdisk平台时发现自带的busybox无法通过ip命令配置can接口,执行can配置命令 ip link set can0 type can bitrate 会出现以下报错: ip ...

  10. trident原理及编程指南

    目录 trident原理及编程指南 一.理论介绍 1.trident是什么? 2.trident处理单位 3.事务类型 二.编程指南 1.定义输入流 2.统计单词数量 3.输出统计结果 4.split ...