使用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. 操作系统：修改VirtualBox for Mac的虚拟硬盘大小
			
    我安装的是Mac版的VirtualBox,不能从GUI上修改硬盘大小,但是实在是大小不够用了. 百度后得知,可以用命令行修改. 1.打开终端,输入sudo su,取得管理员权限 $ sudo su P ...
    
			
    2. 
						
  2. DataSnap 多层返回数据集分析FireDAC JSON
			
    采用服务器返回数据,一种是返回字符串数据例如JSON,跨平台跨语言,任何语言调用都支持兼容,类似WEBService. 第二种是紧密结合c++builder语言,传输DataSet,可以是Client ...
    
			
    3. 
						
  3. MySQL下perror工具查看System Error Code信息
			
      在MySQL数据库的维护过程中,我们有时候会在MySQL的错误日志文件中看到一些关于Operating system error的错误信息,例如在MySQL的错误日志里面,有时候会看到关于 Inn ...
    
			
    4. 
						
  4. 【公众号系列】超详细SAP HANA JOB全解析
			
    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[公众号系列]超详细SAP HANA JOB全解 ...
    
			
    5. 
						
  5. Highcharts入坑记
			
    第一次用Highcharts画一个温度湿度变化的图片,因为不熟悉跳了好多坑,特记录下: 一.JS引用 <script src="~/Scripts/jquery.min.js" ...
    
			
    6. 
						
  6. 高端内存映射之kmap_atomic固定映射--Linux内存管理(二十一)
			
    1 固定映射 1.1 数据结构 linux高端内存中的临时内存区为固定内存区的一部分, 对于固定内存在linux内核中有下面描述 x86 arm arm64 arch/x86/include/asm/ ...
    
			
    7. 
						
  7. Linux分页机制之分页机制的实现详解--Linux内存管理(八)
			
    1 linux的分页机制 1.1 四级分页机制 前面我们提到Linux内核仅使用了较少的分段机制,但是却对分页机制的依赖性很强,其使用一种适合32位和64位结构的通用分页模型,该模型使用四级分页机制, ...
    
			
    8. 
						
  8. js 学习之路4：js运行/输出中文乱码问题解决
			
    网上找了一个简单的例子,编写出来很简单,但是乱码的问题稍微困扰了一下. 题目: 1. 大马驮2石粮食,中马驮1石粮食,两头小马驮一石粮食,要用100匹马,驮100石粮食,该如何调配? js解决代码:  ...
    
			
    9. 
						
  9. python 完整项目开发流程
			
    1. 安装 python    2. 安装virtualenvwrapper    3. 虚拟环境相关操作    4. 进入虚拟环境, 安装django    5. 安装编辑器    6. 安装mys ...
    
			
    10. 
						
  10. 如何提高 windows  的使用效率？--巧用运行命令
			
    windows 操作系统可以使用 win+R 运行一些命令执行任务,好处是:高效.快速.准确. 启动程序 将程序 chrome 写入以下注册表中, SOFTWARE\Microsoft\Windows ...
    
			
    11.