隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）

第一种：使用纯css样式属性隐藏滚动条：火狐浏览器的css写法不兼容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>纯css实现隐藏滚动条但鼠标可以滚动的效果</title><style>html,body {height: 100%;padding:0px;margin:0px;}.outContainer {width:350px;height:300px;border:2px solid orangered;overflow-x: hidden;overflow-y: scroll;}.inContent {height:150px;background-color:lightblue;}.inContent2 {background-color:purple;}/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */.outContainer::-webkit-scrollbar {  width:0 !important;   /* remove scrollbar space */background: transparent;  /* optional: just make scrollbar invisible */}/* 兼容IE10+ */.outContainer { -ms-overflow-style: none; }/* 但是firefox代码无效 */.outContainer { overflow: -moz-scrollbars-none; }</style>
</head>
<body><div class="outContainer" ><div class="inContent" ></div><div class="inContent inContent2"></div><div class="inContent" ></div></div>
</body>
</html>

第二种：使用盒子和定位将里层进度条隐藏，里层容器的width多17px，能兼容各个浏览器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html,body {height: 100%;padding:0px;margin:0px;}.outContainer {width:350px;height:300px;/* border:2px solid orangered; */overflow: hidden;position: relative;}.inContainer {overflow-x:hidden;overflow-y:scroll;position: absolute;  /*不能使用relative和fixed定位*/top:0;bottom:0;   /*相当于height:100%时的高度*/left: 0;right:-17px;  /*图层宽度大于width:100%,滚动条的宽度刚刚好被隐藏 */      }.inContent {height:150px;background-color:lightblue;}.inContent2 {background-color:purple;}</style></head>
<body><div class="outContainer" ><div class="inContainer"><div class="inContent" ></div><div class="inContent inContent2"></div><div class="inContent" ></div></div></div></body>
</html>

第三种：使用滚动条插件，如niceScroll.js插件

niceScroll插件的下载和使用：https://mp.csdn.net/postedit/84781490

配置选项 autohidemode：“hidden”

    $("#boxscroll").niceScroll({cursorcolor:"#00F",boxzoom:true,autohidemode:'hidden',  //选项一直隐藏滚动条});

隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）相关推荐

html强制隐藏,html隐藏滚动条_css强制隐藏浏览器滚动条方法
摘要腾兴网为您分享:css强制隐藏浏览器滚动条方法,易视云3,闪电侠,平安知鸟,牛牛粤语等软件知识,以及mysql管理软件,手机录音剪辑软件,c4d,半梦视界,兔兔ios,微信阅读量软件,英雄联盟租 ...
Css实现自动隐藏scroll滚动条但不影响滚动功能
Css实现自动隐藏scroll滚动条但不影响滚动功能谷歌内核webkit .container::-webkit-scrollbar {display: none; //Safari and Chr ...
html文件打开系统错误,win7打开word提示“无法打开文件Normal因为内容有错误”的两种解决方法...
win7系统打开Word的时候,弹出提示"无法打开文件Normal.dotm,因为内容有错误",为什么会出现错误提示呢?小编就按照错误提示寻找文件,最后发现是Word自动生成的模板 ...
CSS隐藏浏览器滚动条
网页为什么会出现滚动条呢? 只要网页内容大于视窗,滚动条就会出现. 一般好多用给外层元素(比如body)加 overflow: hidden;overflow-x:hidden,overflow:hi ...
HTML 显示和隐藏浏览器滚动条
滚动条和overflow有关显示: overflow-x:auto; overflow-y:auto; overflow-x:scroll; overflow-y:scroll; 隐藏: overf ...
WPF ScrollViewer滚动条根据内容自动滚动到底部
WPF ScrollViewer包裹的容器中的如果出现动态填充,在填充的过程中需要最新填充的数据始终显示在UI上时,如果填充内容高度超出控件实际高度时,默认滚动条是不会进行垂直偏移设置的,新增加的内容 ...
CSS 修改滚动条样式隐藏浏览器滚动条
/* 滚动条整体部分 */ div::-webkit-scrollbar {} /* 滚动条里面的滑块 */ div::-webkit-scrollbar-thumb {}/* 滚动条的轨道的两端按钮 ...
win10系统下Edge浏览器搜索引擎[必应]和新建标签页被篡改百度的一种解决方式
一.我的情况:win10系统下Edge浏览器搜索引擎[必应]和新建标签页被篡改百度的搜索引擎和百度的页面我的解决方案步骤如下: 1. 检查电脑管家的浏览器保护检查一下你的电脑是否后台开启了电脑管家 ...
浏览器打开的网页被恶意篡改的三种解决方式个人总结的最全的方式，亲测有效
问题场景: 每次打开浏览器,都是2345或者360的网页,怎么改也改不掉,如下图: 在家里折腾了大半天,也百度了很多相关解决方案,但是都不全,这里我把自己总结的方式分享给大家浏览器被2345或者36 ...

隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）

第一种：使用纯css样式属性隐藏滚动条：火狐浏览器的css写法不兼容

第二种：使用盒子和定位将里层进度条隐藏，里层容器的width多17px，能兼容各个浏览器

第三种：使用滚动条插件，如niceScroll.js插件

隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）相关推荐

最新文章

热门文章

隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）

第一种：使用纯css样式属性隐藏滚动条 ：火狐浏览器的css写法不兼容

第二种：使用盒子和定位将里层进度条隐藏，里层容器的width多17px，能兼容各个浏览器

第三种：使用滚动条插件，如niceScroll.js插件

隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）相关推荐

最新文章

热门文章

第一种：使用纯css样式属性隐藏滚动条：火狐浏览器的css写法不兼容