使用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. BIM与GIS
			
    BIM行业是建筑与IT结合而形成的一个新兴行业,既然能说是行业,说明它包含的内容非常丰富,懂一点和完全懂是两码事,就好像一滴水和一片大海的范围一样.现在国内有很多高校开设了BIM专业,并对口招收了学生 ...
    
			
    2. 
						
  2. AS使用自带虚拟机报错解决
			
    Android studio自带的Google虚拟机越来越好用了,所以可以打开这个功能,想用的时候打开使用即可 使用的过程中经常会遇到这样的问题: 19:26 Emulator: emulator:  ...
    
			
    3. 
						
  3. WPF:在DataTemplate中使用DataType
			
    DataTemplate中的DataType的功能实际上和Style中的TargetType很类似. 在Style中,使用了TargetType之后,如果不定义Style的Key,那么这个Style将 ...
    
			
    4. 
						
  4. PM过程管理成熟度1级
			
    之前,我已经从项目实现的角度.企业管理诉求两方面,分析了PM的核心能力架构,以及其在过程管理方面的能力等级.接下来,Fancier凡奉信息会站在PM能力成长的角度,横向与纵向阐述每一成熟度等级PM的过 ...
    
			
    5. 
						
  5. 生成Csv格式的字符串
			
    using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using Sy ...
    
			
    6. 
						
  6. eos 创建两对的公钥和私钥, 钱包，交易所转账到主网，主网到交易所
			
    在ubuntu18.04上安装EOS的目的: 在ubuntu中,进行eos源码编译和安装 在不联网的安全环境下,用eos官方的命令行工具,创建自己的公钥和私钥 用eos官方的命令行工具,创建钱包,执行 ...
    
			
    7. 
						
  7. 在搭建tesseract-OCR环境中遇到问题和反省
			
    Tesseract,一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,特点是开源,免费,支持多语言,多平台. 在搭 ...
    
			
    8. 
						
  8. Ajax 与文件上传
			
    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...
    
			
    9. 
						
  9. Java线程状态转换
			
    前言:对于Java线程状态方面的知识点,笔者总感觉朦朦胧胧,趁着最近整理资料,将Java线程状态方面的知识点总结归纳,以便加深记忆. 1.Java线程状态值 在Thread类源码中通过枚举为线程定义了 ...
    
			
    10. 
						
  10. UVALive - 3211 - Now or later（图论——2-SAT）
			
    Problem   UVALive - 3211 - Now or later Time Limit: 9000 mSec Problem Description Input Output Sampl ...
    
			
    11.