使用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. html5 拖拽上传文件时，屏蔽浏览器默认打开文件
			
    参考: https://www.cnblogs.com/kingsm/p/9849339.html
    
			
    2. 
						
  2. mathjs,math.js解决js运算精度问题
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    3. 
						
  3. 【Dojo 1.x】笔记7 配置对象dojoConfig的内容1：has属性、加载器的属性
			
    说完了出身,即出身自dojo/_base/目录下的config模块,那就要好好讲讲这对象有什么可以写的属性了. 1. has属性 官方说是用于更好的特征检测的,具体有什么用现在还不得知. 例如: &l ...
    
			
    4. 
						
  4. Django Windows环境下部署
			
    环境准备 本文将介绍如何在Windows系统上部署Django web项目,本次部署基于下面的架构: Windows10 64位+Python3.6+Django1.11+Apache2.4+mod_ ...
    
			
    5. 
						
  5. Keepalived脑裂
			
    问题描述:开启防火墙后,Keepalived出现脑裂. 背景架构:两台centos7通过Keepalived实现高可用 问题具体表现形式:两台主机通过ip addr (ip  a)查看,发现两台主机都 ...
    
			
    6. 
						
  6. 【原】Java学习笔记008 - 方法（函数）
			
    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 方法/函数 Met ...
    
			
    7. 
						
  7. 安装ESXi部署OVF详细步骤
			
    整个安装部署过程均在个人环境进行.欧克,我们现在开始. 一.安装ESXi 1.Enter回车 2.Enter回车继续 3.F11,接受继续 4.Enter,回车继续(选择安装ESXi的设备) 5.默认 ...
    
			
    8. 
						
  8. windows批处理添加AD域账户
			
    因为要用个批处理命令在Windows Server里面批量添加域用户,所以需要使用批处理命令. 我这篇是纯新手教程,在百度上搜了一些批处理命令感觉属于进阶教程,研究了两天才完成我要完成的目标. 下面从 ...
    
			
    9. 
						
  9. 7 Best Free RAR Password Unlocker Software For Windows
			
    Here is the list of Best Free RAR Password Unlocker Software for Windows. These software run differe ...
    
			
    10. 
						
  10. 3.15 总结，初始java
			
    
			
    11.