淘先锋技术网

首页 1 2 3 4 5 6 7

滚动条插件

1. slimscroll

  • 介绍：

把任何div元素包裹的内容区加上具有好的滚动条。slimscroll不占用任何视觉空间，它只出现在一个用户启动的鼠标。用户可以拖动滚动条或使用鼠标滚轮改变滚动值。

  • 使用方式：
  1. 全局引入：
npm install jquery-slimscroll
  1. 引入jq和slimscroll.js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
  • 参数设置：
 $(obj).slimScroll({
	  width: 'auto', //可滚动区域宽度
	  height: '100%', //可滚动区域高度
	  size: '10px', //组件宽度
	  color: '#000', //滚动条颜色
	  position: 'right', //组件位置：left/right
	  distance: '0px', //组件与侧边之间的距离
	  start: 'top', //默认滚动位置：top/bottom
	  opacity: .4, //滚动条透明度
	  alwaysVisible: true, //是否 始终显示组件
	  disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
	  railVisible: true, //是否 显示轨道
	  railColor: '#333', //轨道颜色
	  railOpacity: .2, //轨道透明度
	  railDraggable: true, //是否 滚动条可拖动
	  railClass: 'slimScrollRail', //轨道div类名 
	  barClass: 'slimScrollBar', //滚动条div类名
	  wrapperClass: 'slimScrollDiv', //外包div类名
	  allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
	  wheelStep: 20, //滚轮滚动量
	  touchScrollStep: 200, //滚动量当用户使用手势
	  borderRadius: '7px', //滚动条圆角
	  railBorderRadius: '7px' //轨道圆角
 });
  • 事件：
 $(selector).slimScroll().bind('slimscroll', function(e, pos){
     console.log("Reached " + pos);
 });//当滚动条达到父容器的顶部或底部时触发
  • 示例：
	<style>
		.scroller{
			width: 500px;
			height: 50px;
			margin: 0 auto;
		}
	</style>
	<div class="scroller" data-height="100px" data-always-visible="1" data-rail-visible="1">
		   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.
	   
		Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
	 </div> 
	<script>
	  $(document).ready(function () {
          $(".scroller").slimScroll({
              height: 100,
              alwaysVisible: false
          });
      });
	   
	 </script>

注：一定在DOM加载完才能为元素绑定插件，即需要当DOM元素加载完成才可进行插件的初始化

官网地址：http://rocha.la/jQuery-slimScroll

2. nicescroll

  • 介绍
    一款完全基于 jQuery 框架的滚动条插件，它不仅有着类似 iOS 系统设备的滚动条外观，而且还支持任意的 <div>、<iframe>、<body>元素的滚动效果。

  • 特点
    1.不需要增加额外的 CSS。
    2.几乎全浏览器兼容：Chrome、Firefox、Edge、IE8+、Safari、Opera
    3.实现只需要一段代码，侵入性非常小。
    4.样式可完全自定义。
    5.支持触摸事件，可在触摸屏上使用。

  • 使用方式
    页面中引入 jquery.js和jquery.nicescroll.js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
  • 参数设置
$(obj).niceScroll({
      cursorcolor: "#424242", // 改变滚动条颜色，使用16进制颜色值
      cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
      cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
      cursorwidth: "5px", // 滚动条的宽度，单位：便素
      cursorborder: "1px solid #fff", // CSS方式定义滚动条边框
      cursorborderradius: "5px", // 滚动条圆角（像素）
      zindex: "auto" | <number>, // 改变滚动条的DIV的z-index值
      scrollspeed: 60, // 滚动速度
      mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
      touchbehavior: false, // 激活拖拽滚动
      hwacceleration: true, // 激活硬件加速
      boxzoom: false, // 激活放大box的内容（是否激活全屏放大显示）
      dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大
      gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) 激活变焦当out/in（两个手指外张或收缩）
      grabcursorenabled: true // (仅当 touchbehavior=true) 显示“抓住”图标display "grab" icon
      autohidemode: true, // 隐藏滚动条的方式, 可用的值: 
        true | // 无滚动时隐藏
        "cursor" | // 隐藏
        false | // 不隐藏,
        "leave" | // 仅在指针离开内容时隐藏
        "hidden" | // 一直隐藏
        "scroll", // 仅在滚动时显示        
      background: "", // 轨道的背景颜色
      iframeautoresize: true, // 在加载事件时自动重置iframe大小
      cursorminheight: 32, // 设置滚动条的最小高度 (像素)
      preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
      railoffset: false, // 可以使用top/left来修正位置
      bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动
      spacebarenabled: true, // 当按下空格时使页面向下滚动
      railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距
      disableoutline: true, // 当选中一个使用nicescroll的div时，chrome浏览器中禁用outline
      horizrailenabled: true, // nicescroll可以管理水平滚动
      railalign: right, // 对齐垂直轨道
      railvalign: bottom, // 对齐水平轨道
      enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容
      enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件
      enablekeyboard: true, // nicescroll可以管理键盘事件
      smoothscroll: true, // ease动画滚动
      sensitiverail: true, // 单击轨道产生滚动
      enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动)
      cursorfixedheight: false, // 修正光标的高度（像素）
      hidecursordelay: 400, // 设置滚动条淡出的延迟时间（毫秒）
      directionlockdeadzone: 6, // 设定死区，为激活方向锁定（像素）
      nativeparentscrolling: true, // 检测内容底部便于让父级滚动
      enablescrollonselection: true, // 当选择文本时激活内容自动滚动
      cursordragspeed: 0.3, // 设置拖拽的速度
      rtlmode: "auto", // DIV的水平滚动从左边开始
      cursordragontouch: false, // 使用触屏模式来实现拖拽
      oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动，如果设为false则不支持水平滚动，如果设为auto支持双轴滚动
      scriptpath: "" // 为boxmode图片自定义路径 ("" => same script path)
      preventmultitouchscrolling: true // 防止多触点事件引发滚动
  });

注：一定在DOM加载完才能为元素绑定插件，即需要当DOM元素加载完成才可进行插件的初始化

  • 事件

$(obj).getNiceScroll().hide();:隐藏滚动条

$(obj).getNiceScroll().resize();：检测滚动条是否重置大小（当窗口改变大小时）

$(obj).getNiceScroll(0).doScrollLeft(x, duration); // X轴方向$(obj).getNiceScroll(0).doScrollTop(y, duration); // Y轴方向：滚动到某个位置

  • 示例：
<style>
	.scroller{
		width: 500px;
		height: 50px;
		margin: 0 auto;
	}
</style>
<div class="scroller" data-height="100px" data-always-visible="1" data-rail-visible="1">
		   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.
	   
		Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
	 </div> 
	 <script>
		$(document).ready(function () {
	          $(".scroller").niceScroll();
	      });
      </script>

官网地址：http://www.areaaperta.com/nicescroll/
Github地址：https://github.com/inuyaksa/jquery.nicescroll