Jquery自定义滚动条

时间:2013-01-02 22:15:22

标签: jquery jquery-ui

所以我尝试使用div复制浏览器滚动条行为到目前为止我无处可去,首先让我们看一下我的代码jsFiddle和实际代码:

(function( $ ) {
    $.widget( "ui.slider", $.ui.mouse,{

    _create: function() {
        this._mouseInit();
    },

    _mouseDrag: function(e) {
        mouseOffset = (e.offsetY / this.element.height()) * 100;
        handleOffset = (e.target.offsetTop / this.element.height()) * 100;

        $(".handle").css("top", (mouseOffset - handleOffset) + "%");        
    }

    });

}( jQuery ) );

因为你可以看到我正在使用jquery小部件捕获鼠标事件,正如你可以看到当前代码它在jsFiddle中疯狂,我想要实现的是无论你点击什么,滚动条并开始拖动该栏会与鼠标一起使用而不是向下或向上或向中间跳跃等等,基本上它应该在浏览器中工作方式相同,任何帮助都会受到赞赏。

3 个答案:

答案 0 :(得分:1)

出于好奇,实现滚动条比处理滚动内容需要更多的努力。

scrollbar plugin for jQuery会对您更有用吗?

答案 1 :(得分:0)

这是一个很好的滚动条,适用于DIV标签。您可以根据需要自定义,包括您自己的图形和颜色,尺寸等。它对我有用,但它有成本。

请查看我们的www.sa-wired.com/scrollbar/plugins.php

祝你好运。

答案 2 :(得分:0)

这个也很好用:

https://github.com/mzubala/jquery-custom-scrollbar

并且安装非常简单。