使用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. Java发送电子邮件
			
    转自 https://blog.csdn.net/xietansheng/article/details/51673073 纯代码, 详情请至原文查看 需要一个javamail的jar包 以下为实现代 ...
    
			
    2. 
						
  2. 学习安卓开发[3] - 使用RecyclerView显示列表
			
    在上一篇学习安卓开发[2] - 在Activity中托管Fragment中了解了使用Fragment的好处和方法,本次记录的是在进行列表展示时RecyclerView的使用. RecyclerView ...
    
			
    3. 
						
  3. elasticsearch常用命令
			
    elasticsearch的rest访问格式: curl -X<REST Verb> <Node>:<Port>/<Index>/<Type> ...
    
			
    4. 
						
  4. 关于MongoDB数据库的日志解析
			
    MongoDB日志记录了数据库实例的健康状态.语句的执行状况.资源的消耗情况,所以日志对于分析数据库服务和性能优化很有帮助. 因此,很有必要花费一些时间来学习解析一下MongoDB的日志文件. 日志信 ...
    
			
    5. 
						
  5. linux 硬盘满了如何处理(转)
			
    linux 硬盘满了如何处理 事件源于在服务器运行一个脚本程序… 好好的脚本突然报错,还以为脚本出现问题了.细看报错原因(具体报错信息已经忘记了),是没有可用空间.从没遇见过这个情况,怎么办呢? 一. ...
    
			
    6. 
						
  6. LeetCode算法题-Perfect Number（Java实现）
			
    这是悦乐书的第249次更新,第262篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第116题(顺位题号是507).我们定义Perfect Number是一个正整数,它等于 ...
    
			
    7. 
						
  7. kernel笔记——内核编译与进程管理
			
    内核与操作系统 由于一些商业操作系统设计上的缺陷以及日益庞杂,“操作系统”的概念对很多人而言变得含糊不清.在进一步讨论Linux内核的话题前,我们先区分“内核”与“操作系统”这两个概念. 操作系统:指 ...
    
			
    8. 
						
  8. 最小化spring XML配置，Spring提供了4种自动装配策略。
			
    1.ByName自动装配:匹配属性的名字 在配置文件中的写法: <bean name="course" class="course类的全包名">&l ...
    
			
    9. 
						
  9. token
			
    18f9nWvThC274lo3USjgfeldynt0t/r/w0yjLbj9 http://app-static.acc5.com/app/testpost.php
    
			
    10. 
						
  10. 19 python初学（os 模块，sys 模块，hashlib 模块）
			
    os 模块: # _author: lily # _date: 2019/1/13 import os print(os.getcwd()) # 得到当前的工作目录 # print(os.chdir( ...
    
			
    11.