针对模拟滚动条插件(jQuery.slimscroll.js)的修改

在开发过程中程序员总会碰到产品经理提出的各种稀奇古怪的需求,尽管有些需求很奇葩,但不得不说有些须有还是能指引我们不断的学习与进步,最近在工作中就碰到这种问题。需求是要求在各主流浏览器上使用自定义的滚动条样式,并且达到完美兼容,此篇博客记录自己的分析过程。此篇博客的源码可访问slimscroll

为了能使用自定义的滚动条样式并且能在各主流浏览器上兼容,首先想到的就是css定制滚动条的样式。于是在网上搜索了下发现确实有这样的css样式存在:

ul::-webkit-scrollbar/*滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。*/
ul::-webkit-scrollbar-button /*滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/
ul::-webkit-scrollbar-track /* 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/
ul::-webkit-scrollbar-track-piece /*内层轨道,滚动条中间部分(除去)。*/
ul::-webkit-scrollbar-thumb  /*滚动条里面可以拖动的那部分*/
ul::-webkit-scrollbar-corner  /* 边角*/
ul::-webkit-resizer /*定义右下角拖动块的样式*/

这里只是初略的介绍下,具体的使用方法可参考这篇博客自定义浏览器滚动条的样式,打造属于你的滚动条风格
这种方法确实可以定制滚动条样式,但是仅仅是在webkit内核浏览器有效,不能达到完美兼容。上面的博客中推荐一种jquery插件来解决这个问题,但是介绍的并不全面,也不好使用。于是我在网上搜索了下发现类似的jquery插件有很多,为了更贴近项目需要我选择了jquery.slimscroll.js. 可是在实际使用的过程中发现该插件不支持滚动的内容翻页,一旦翻页追加新内容,因为内容高度的变化导致存在滚动内容跳跃的情况。

重现问题

看实际效果请猛击这里demo1
从该插件的github上下载源码,并引入到页面中,为了看到效果请打开调试面板,我设置了在内容滚动时输出其scrollTop值,根据输出的结果我们可以很明显的看到在追加新内容后,内容会有跳跃的情况

scrollTop 49
scrollTop 51
scrollTop 105   //内容向上跳跃了
scrollTop 108

打开源码分析原因

源码中的以下这段是在拖动滚动条时要触发的函数

// make it draggable and no longer dependent on the jqueryUI
if (o.railDraggable){ //默认设置为true
  bar.bind("mousedown", function(e) {
    var $doc = $(document);
    isDragg = true;
    t = parseFloat(bar.css('top'));
    pageY = e.pageY;

    $doc.bind("mousemove.slimscroll", function(e){
      currTop = t + e.pageY - pageY;
      bar.css('top', currTop);
      scrollContent(0, bar.position().top, false);// scroll content
    });

    $doc.bind("mouseup.slimscroll", function(e) {
      isDragg = false;hideBar();
      $doc.unbind('.slimscroll');
    });
    return false;
  }).bind("selectstart.slimscroll", function(e){
    e.stopPropagation();
    e.preventDefault();
    return false;
  });
}

翻页追加新内容的时候,我们需要重新初始化该插件,初始化的过程中会重新计算滚动条的top值,下拉翻页时由于鼠标一直是按下的状态,在追加新内容后t值和pageY值记录的一直是按下状态时刻(未追加新内容时刻)的。所以当追加完新内容后,再触发mousemove事件时,currTop又会被计算得到翻页之前的值(滚动条的top值也是之前的值了),而此时的内容高度已经变化了,所以内容会跳跃。(不知道有没有解释清楚啊)

针对问题的解决之道

通过上面的分析我们知道由于在翻页追加新内容后未获取到最新的滚动条的top值和最新的e.pageY值,针对这个问题我在源码中添加了以下一些代码:

// scroll content by the given offset
scrollContent(offset, false, true);

// 以下是我添加的内容
//追加新内容后强制解绑之前的鼠标事件,不使用翻页之前记录的值
$(document).unbind('mousemove.slimscroll');
//解绑后为了能继续下拉滚动条,需重新绑定鼠标事件
//记录最新的滚动条的top值和鼠标位置
var pageY, t = parseFloat(bar.css('top'));
$(document).bind("mousemove.slimscroll", function(e) {
    //这里判断鼠标状态是为了区分滚动事件和拖动事件
    //当鼠标左键是按下状态时,
    if (e.buttons == 1) {
        pageY = pageY || e.pageY
        currTop = t + e.pageY - pageY;
        bar.css('top', currTop);
        scrollContent(0, currTop, false); // scroll content
    }
    return;
})

以上代码解决翻页追加新内容后,拖动滚动条存在的跳跃问题

function _onWheel(e) {
    //...
    var e = e || window.event;

    // 以下是我添加的内容
    //取消拖动
    $(document).unbind('mousemove.slimscroll');

    //...
}

以上这段代码是为了解决翻页滚动后的点击事件被覆盖问题

这里为什么用e.buttons而不用e.button?
MouseEvent.buttons 可指示任意鼠标事件中鼠标的按键情况
MouseEvent.button 只能够表明在事件中通过按下或者放开一个按键,或者是多个按键同时按下时,哪一个按键被按下。因此,它对判断mouseenter, mouseleave, mouseover, mouseout or mousemove这些事件并不可靠。

修改源码之后的效果请猛击这里demo2

这里修改的代码仅仅是我一人之见,如果您有更好的方法,欢迎在评论中提出

参考文献:

MouseEvent.button
MouseEvent.buttons

原文地址:https://www.cnblogs.com/jesse131/p/9079285.html

时间: 2024-10-10 20:24:11

针对模拟滚动条插件(jQuery.slimscroll.js)的修改的相关文章

【转载】jquery 滚动条插件jquery.slimscroll.js

转载http://www.w3cways.com/1910.html jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动. jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小.尺寸.颜色以及众多参数自定义,非常不错,推荐大家使用. 官网地址:https://github.com/kujian/jQuery-slimScroll CND:http://cdn.bootcss.com/jQuery-sl

滚动条插件---jquery.nicescroll.js 简单使用

// 引入下载好的js文件 <script src="./js/jquery.nicescroll.min.js"></script> <script> //因为在同一个页面有tab切换项都需要使用滚动条,遇到一个问题,就是在点击下一个切换项的时候,上一个切换项的滚动条不会立即消失,所以给每一个切换项设置点击效果,添加和删除类名. //注意:如果没有给不同的切换项添加上类名的话,滚动条是不会显示的,所以在开始就要给他们添加上需要的类名,在点击的时候在

基于jQuery的滚动条插件-jquery.jscrollbar

jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件 主要功能 支持水平滚动条 支持垂直滚动条 自动判断水平滚动条和垂直滚动条是否显示 支持外部调用来滚动内容 支持滚动条部分样式自定义 支持键盘方向键控制 支持鼠标滚动(需要mousewheel插件) 支持滚动条显示位置设置(外部|悬浮) 支持手动更新界面 依赖的库 jQuery (http://jquery.com/) jquery.jqdrag (https://github.c

jQuery插件 -- 表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

一个简单的页面弹窗插件 jquery.pageMsgFrame.js

页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处:http://www.cnblogs.com/dereksunok/p/3724764.html html代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

jQuery插件 -- 动态事件绑定插件jquery.livequery.js

http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调函数.不仅当选择器匹配的元素会被绑定事件,而且后来通过JavaScript添加的元素都会被绑定事件.当元素不再和选择器匹配时,livequery会自动取消事件注册,使得开发者不再需要关注HTML元素的来源,只需要关注如何编写其绑定的事件即可 通过jQuery选择器选择一个DOM元素,livequer

Form表单插件jquery.form.js

常常使用到这个插件,但是老忘记怎么使用,现在对大家写的进行一定的整合. 使用插件实例: 一般的使用方法 <!-- 引入jquery文件 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"><

插件五之滚动条jquery.slimscroll.js

前言 slimscroll.js用于模拟传统的浏览器滚动条(竖向),原理为原内容内置于一个仅可视区域显示层,使用2个div层用于模拟滚动条和滚动条背景轨道监听滚动条div高度变化来控制内容层位置(猜测),可自定义滚动条颜色,其轨迹(背景颜色),宽度,位置,滚动阀值,与容器的padding值等~使用中依赖于jquery库. <script type="text/javascript" src="qingyu/js/jquery.min.js"></s

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动 页