使用css实现无滚动条滚动，摘抄自：曹小萌博客

使用css实现无滚动条滚动，大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-x: hidden;overflow-y: scroll;然后再设置外层div的width小于内容div的width，就是用一个无滚动条的div包裹另一个有滚动条的div，从而实现隐藏滚动条的效果。

直接撸代码：





<body>

        <div class="box_wrap">

            <ul>

                <li>测试数据1</li>

                <li>测试数据2</li>

                <li>测试数据3</li>

                <li>测试数据4</li>

                <li>测试数据5</li>

                <li>测试数据6</li>

                <li>测试数据7</li>

                <li>测试数据8</li>

                <li>测试数据9</li>

                <li>测试数据10</li>

                <li>测试数据11</li>

                <li>测试数据12</li>

                <li>测试数据13</li>

                <li>测试数据14</li>

                <li>测试数据15</li>

                <li>测试数据16</li>

                <li>测试数据17</li>

                <li>测试数据18</li>

                <li>测试数据19</li>

                <li>测试数据20</li>

                <li>测试数据21</li>

                <li>测试数据22</li>

            </ul>

        </div>

    </body>








body,html {

                margin:;

                padding:;

                height: 100%;

                overflow: hidden;

            }

            ul,li {

                margin:;

                padding:;

                list-style: none;

            }

            .box_wrap {

                margin: 20px auto;

                width: 200px;

                height: 400px;

                border: 1px solid #ccc;

                overflow: hidden;

            }

            .box_wrap ul  {

                width: 220px;/* 多出20像素是滚动条的位置，会被父容器盖住就看不到了 */

                height: 100%;

                overflow-x: hidden;

                overflow-y: auto;

            }

            .box_wrap ul li {

                width: 200px;

                height: 40px;

                line-height: 40px;

                border-bottom: 1px solid #ccc;

                font-size: 12px;

                text-align: center;

            }




这样可以实现无滚动条滚动，效果图是这样的






接下来我只用插件修改滚动条样式


需要去掉box_wrap  的overflow: hidden; 让滚动条显示出来；


这个插件使用很简单；这个插件需要引入jquery,mCustomScrollbar.js 和 jquery,mCustomScrollbar.css




$(".box_wrap ul").mCustomScrollbar({

        setTop:"0"

    });




直接绑上方法就可以了，加上过后的效果是这样的


当然，这么丑的样式我们肯定是不能接受的，那么接下来就修改它的css，改成自己想要的样式，




/* =====自定义滚动条===== */

            .mCSB_inside>.mCSB_container{

                margin-right: 10px;

            }

            .mCSB_scrollTools{

                width: 10px;

            }

            .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{

                width: 100%;

                background-color: rgba(207,207,207,1);

                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5cfcfcf,endColorstr=#E5cfcfcf);

            }

            .mCSB_scrollTools .mCSB_draggerRail{

                background-color: rgba(255,255,255,.4);

                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff,endColorstr=#66ffffff);

            }

            .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{

                background-color: rgba(207,207,207,1);

                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5cfcfcf,endColorstr=#E5cfcfcf);

            }

            .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{

                background-color: rgba(207,207,207,1);

                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5cfcfcf,endColorstr=#E5cfcfcf);

            }

            .mCSB_scrollTools .mCSB_draggerRail{

                width:;

            }

            .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{

                margin-right: 10px;

            }




这是下小胖自己修改的样式，效果


这样就好看多了，想要什么样式都可以自己修改的，这个就的慢慢去调试了。
												


											
使用css实现无滚动条滚动+使用插件自定义滚动条样式的更多相关文章
	

    
								
  1. css和js实现硬件加速渲染自定义滚动条
		
    听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...
    
		
    2. 
						
  2. CSS元素超出部分滚动，并隐藏滚动条
		
    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...
    
		
    3. 
						
  3. 自定义滚动条jQuery插件- Perfect Scrollbar
		
    主要特性: 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计 滚动条支持完整的自定义 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化 依赖于jQuery和相关几个类库 不需要定义宽度 ...
    
		
    4. 
						
  4. WM_SYSCOMMAND包括很多功能，比如：拖动左边框、拖动标题栏、滚动条滚动、点击最小化、双击标题栏——Delphi 通过事件代替了大部分常用的消息，所以Delphi 简单、易用、高效
		
    procedure TForm1.WMSysCommand(var Message: TWMSysCommand); var str: string; begin case Message.CmdTy ...
    
		
    5. 
						
  5. css 自定义滚动条
		
    我遇到的场景: 对于iframe窗口,自带滚动条是整个窗口的大小.有时需要顶部或底部固定,则滚动条不应该触碰到顶部或底部. 那么首先打开iframe时应该去掉滚动条 scrolling="n ...
    
		
    6. 
						
  6. 自定义滚动条——控制div的大小和透明度
		
    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
    
		
    7. 
						
  7. 利用CSS3新特性实现完全兼容的自定义滚动条。
		
    背景:最近项目里面因为统一页面风格,用到了自定义滚动条,在完成之前的那个滚动条的时候,与网上各个滚动条插件实现的方法类似,相当于造了轮子,通过css3的 网上看到的滚动条插件多数是通过监听内容的滚动事 ...
    
		
    8. 
						
  8. jQuery Validate 表单验证插件----自定义校验结果样式
		
    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
    
		
    9. 
						
  9. 【Flutter实战】自定义滚动条
		
    老孟导读:[Flutter实战]系列文章地址:http://laomengit.com/guide/introduction/mobile_system.html 默认情况下,Flutter 的滚动组 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. js 颜色16进制转RGB方法
			
    //颜色16进制转RGB方法 String.prototype.colorRgb = function(){ var sColor = this.toLowerCase(); //十六进制颜色值的正则 ...
    
			
    2. 
						
  2. 小tips：path的join和resolve的使用区别
			
    1.连接路径:path.join([path1][, path2][, ...]) path.join()方法可以连接任意多个路径字符串.要连接的多个路径可做为参数传入. path.join()方法在 ...
    
			
    3. 
						
  3. SAP freelancer夫妻并不难！你也可以！
			
    SAP freelancer夫妻并不难!你也可以! 在笔者看来,如果能有每月超过10万的家庭收入,要是去上海滩购买单价在八万以上的房子,应该是可以轻松应对,想买就可以买,根本不用眨眼睛,不用一丁点儿的 ...
    
			
    4. 
						
  4. python地理处理包——pySAL使用
			
    Pysal是基于Python的开源地理处理库,能提供高层次的空间分析功能.
    
			
    5. 
						
  5. dede后台删除文章后台还有分页显示解决方法
			
    打开dede目录中content_list.php 大概在100行左右 $sql = "SELECT COUNT(*) AS dd FROM `#@__arctiny` $tinyQuery ...
    
			
    6. 
						
  6. linux 硬盘满了如何处理(转)
			
    linux 硬盘满了如何处理 事件源于在服务器运行一个脚本程序… 好好的脚本突然报错,还以为脚本出现问题了.细看报错原因(具体报错信息已经忘记了),是没有可用空间.从没遇见过这个情况,怎么办呢? 一. ...
    
			
    7. 
						
  7. Python面试笔记二
			
    一.算法 1.归并排序 2.快速排序 3.算法复杂度 4.哈希表数据结构 二.数据库 1.设计一个用户关注系统的数据库表 1.设计一个用户关注系统的数据库表,写三个相关的SQL语句两张表,一张user ...
    
			
    8. 
						
  8. Sublime3如何用快捷键实现字母的大小写转换
			
    说明 有的时候需要将字母大小写一键转换一下,很显然,通过编辑器来实现会更加轻量级,而不是打开IDE去实现 我用的Sublime3版本如下: 步骤 1.打开Sublime的Key Bindings 2. ...
    
			
    9. 
						
  9. SQLServer之删除约束
			
    使用SSMS数据库管理工具删除约束 1.连接数据库,选择数据表->展开键或者约束->选择要删除的约束->右键点击->选择删除. 2.在删除对象弹出框中->点击确定. 3. ...
    
			
    10. 
						
  10. 如何删除windows中运行的历史记录
			
    参照下图进入到注册表,依次打开红圈中的路径,在RunMRU里面列出来的全部是记录,全部删除即可
    
			
    11.