使用 Tiny Scrollbar 自动滚动到 div 底部

2024-05-03

我正在编写一个shoutbox 并使其尽可能用户友好。它使用微型滚动条插件 http://plugins.jquery.com/project/tinyscrollbar对于 jQuery,我想合并一个额外的函数,让我可以让它到达底部div。它应该自动滚动(可能具有平滑的动画效果)到底部。

这是实际的小滚动条代码:

(function($){
$.tiny = $.tiny || { };

$.tiny.scrollbar = {
    options: {  
        axis: 'y', // vertical or horizontal scrollbar? ( x || y ).
        wheel: 40,  //how many pixels must the mouswheel scroll at a time.
        scroll: true, //enable or disable the mousewheel;
        size: 'auto', //set the size of the scrollbar to auto or a fixed number.
        sizethumb: 'auto' //set the size of the thumb to auto or a fixed number.
    }
};  

$.fn.tinyscrollbar = function(options) { 
    var oElement = null;
    var options = $.extend({}, $.tiny.scrollbar.options, options); 

    this.each(function() {  
        oElement = new Scrollbar($(this), options);
    });
    return $.extend(this, oElement);
};

function Scrollbar(root, options){
    var oSelf = this;
    var oWrapper = root;
    var oViewport = { obj: $('.viewport', root) };
    var oContent = { obj: $('.overview', root) };
    var oScrollbar = { obj: $('.scrollbar', root) };
    var oTrack = { obj: $('.track', oScrollbar.obj) };
    var oThumb = { obj: $('.thumb', oScrollbar.obj) };
    var sAxis = options.axis == 'x', sDirection = sAxis ? 'left' : 'top', sSize = sAxis ? 'Width' : 'Height';
    var iScroll, iPosition = { start: 0, now: 0 }, iMouse = {};

    function initialize() { 
        oSelf.update();
        setEvents();
        return oSelf;
    }
    this.update = function(bKeepScroll){            
        oViewport[options.axis] = oViewport.obj[0]['offset'+ sSize];
        oContent[options.axis] = oContent.obj[0]['scroll'+ sSize];
        oContent.ratio = oViewport[options.axis] / oContent[options.axis];
        oScrollbar.obj.toggleClass('disable', oContent.ratio >= 1);
        oTrack[options.axis] = options.size == 'auto' ? oViewport[options.axis] : options.size;
        oThumb[options.axis] = Math.min(oTrack[options.axis], Math.max(0, ( options.sizethumb == 'auto' ? (oTrack[options.axis] * oContent.ratio) : options.sizethumb )));
        oScrollbar.ratio = options.sizethumb == 'auto' ? (oContent[options.axis] / oTrack[options.axis]) : (oContent[options.axis] - oViewport[options.axis]) / (oTrack[options.axis] - oThumb[options.axis]);
        iScroll = (bKeepScroll && oContent.ratio <= 1) ? Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll)) : 0;
        setSize();
    }
    function setSize(){
        oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
        oContent.obj.css(sDirection, -iScroll);
        iMouse['start'] = oThumb.obj.offset()[sDirection];
        var sCssSize = sSize.toLowerCase(); 
        oScrollbar.obj.css(sCssSize, oTrack[options.axis]);
        oTrack.obj.css(sCssSize, oTrack[options.axis]);
        oThumb.obj.css(sCssSize, oThumb[options.axis]);     
    };      
    function setEvents(){
        oThumb.obj.bind('mousedown', start);
        oThumb.obj[0].ontouchstart = function(oEvent){
            oEvent.preventDefault();
            oThumb.obj.unbind('mousedown');
            start(oEvent.touches[0]);
            return false;
        }           
        oTrack.obj.bind('mouseup', drag);
        if(options.scroll && this.addEventListener){
            oWrapper[0].addEventListener('DOMMouseScroll', wheel, false);
            oWrapper[0].addEventListener('mousewheel', wheel, false );
        }
        else if(options.scroll){oWrapper[0].onmousewheel = wheel;}
    };
    function start(oEvent){
        iMouse.start = sAxis ? oEvent.pageX : oEvent.pageY;
        var oThumbDir = parseInt(oThumb.obj.css(sDirection));
        iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
        $(document).bind('mousemove', drag);
        document.ontouchmove = function(oEvent){
            $(document).unbind('mousemove');
            drag(oEvent.touches[0]);
        };
        $(document).bind('mouseup', end);
        oThumb.obj.bind('mouseup', end);
        oThumb.obj[0].ontouchend = document.ontouchend = function(oEvent){
            $(document).unbind('mouseup');
            oThumb.obj.unbind('mouseup');
            end(oEvent.touches[0]);
        }
        return false;
    };      
    function wheel(oEvent){
        if(!(oContent.ratio >= 1)){
            oEvent = $.event.fix(oEvent || window.event);
            var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta/120 : -oEvent.detail/3;
            iScroll -= iDelta * options.wheel;
            iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
            oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
            oContent.obj.css(sDirection, -iScroll);
            oEvent.preventDefault();
        };
    };
    function end(oEvent){
        $(document).unbind('mousemove', drag);
        $(document).unbind('mouseup', end);
        oThumb.obj.unbind('mouseup', end);
        document.ontouchmove = oThumb.obj[0].ontouchend = document.ontouchend = null;
        return false;
    };
    function drag(oEvent){
        if(!(oContent.ratio >= 1)){
            iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
            iScroll = iPosition.now * oScrollbar.ratio;
            oContent.obj.css(sDirection, -iScroll);
            oThumb.obj.css(sDirection, iPosition.now);;
        }
        return false;
    };

    return initialize();
};
 })(jQuery);

如果你能修改它来做到这一点,我将永远感激不已!


$('.overview:first').css({top: (($('.overview:first').height() - $('.viewport:first').height()) * (-1)) });
$('.thumb:first').css({top: $('.track:first').height() - $('.thumb:first').height()});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Tiny Scrollbar 自动滚动到 div 底部 的相关文章

随机推荐

  • NancyFX:如何检查查询字符串/表单值是否已正确传递给我的处理程序?

    Nancy 通过以下方式将我的查询字符串和表单值传递给我的处理程序dynamic多变的 下面的示例显示了通过 Nancy 请求传递到 POST 处理程序的表单值 例如Request Form xxx Handler Post gt var
  • 我什么时候应该将可选值与 nil 进行比较?

    很多时候 您需要编写如下代码 if someOptional nil do something with the unwrapped someOptional e g someFunction someOptional 这似乎有点冗长 而且
  • 带条件的 Array.join()

    我该如何使用Array join 有条件的函数 例如 var name aa bb var s name join 输出是 aa bb 我想添加一个条件 仅显示不为空的单词 aa bb 您可以使用Array filter https dev
  • ImmutableJS:合并两个对象列表,而不重复它们

    假设我有以下内容 var allFoods Immutable List var frenchFood Immutable List type french fries price 3 type petit gateau price 40
  • collectstatic 无法收集管理静态文件

    当我运行collectstatic并且管理页面没有CSS时 我遇到以下错误 Error IOError Errno 2 没有这样的文件或目录 u usr local lib python2 7 dist packages django co
  • Angular UI-Router 的“ui-sref”未按预期工作

    如果我使用 href UI Router 将按预期工作 但是 如果我使用 ui sref 它不会按预期工作 我对以下示例有两个问题 锚点 link series 2 no param 和 link series 2 one param 不会
  • 如何使用 Powershell 查找组成员身份以包括嵌套组的成员并包括父组的名称

    我正在尝试创建一个组中所有用户的 CSV 以包含嵌套组的成员 并映射每个成员所在的组 我发现以下 powershell 命令几乎可以完成此任务 但我还需要知道嵌套组的每个成员的嵌套组的名称 MembersALL MembersRecursi
  • Android:RunOnUiThread 与 AsyncTask

    我相信 Google 建议开发人员使用 AsyncTask 但是 我想知道它与使用 new Thread 然后调用 RunOnUiThread 在性能和内存效率方面有何不同 使用 RunOnUithread 的示例 some code 1
  • 如何将 CSS 样式应用于四开输出

    我想将样式应用于四开块输出 我做的第一件事就是在类中嵌入一些 CSS 属性 output在四开文档中 然后使用以下内容引用它 r class output output 它有效 但我认为它不是很有效 因为我必须在每个文档中编写它 所以我写了
  • 基于邻近度的负载均衡

    我正在开展一个项目 我们在世界各地拥有大量 目前为 5 台 服务器 客户端通过集中式代理连接到其中一台服务器 我们知道客户的原籍国 但除此之外一无所知 我们完全控制服务器 因此我们可以获得所需的所有信息 我们不控制客户 他们必须按照标准通过
  • spring 调度一个具有固定延迟和初始延迟的作业

    我正在尝试安排方法调用 我想在服务器启动后立即安排此方法调用 然后每 30 秒调用一次 下面的代码 Configuration EnableScheduling EnableTransactionManagement public clas
  • 如何使用IIS压缩所有文件

    IIS compression has been enabled 以下是web config的http压缩标签
  • Symfony 2 登录后重定向

    在 Symfony 2 中 您可以设置注销目标 以便注销后您将被重定向到 main 但是 登录后您将被重定向到 有没有办法为 成功 登录设置目标 firewalls dev pattern profiler wdt css images j
  • 如何在数据流中正确使用“展平”

    我们的管道如下所示 GCS gz 压缩文件 gt ParDo gt BigQuery 我想使用 展平 从 GCS 中提取多个文件作为管道的输入 但它一直因错误而烦恼 Workflow failed Causes 5001e5764f46ac
  • Rails 形式的当前日期

    我正在学习 Rails 并在书外进行一些探索 并随着知识的增长创建一个具有附加功能的简单应用程序 我正在编写一个简单的博客应用程序 我在表单中添加了一个名为 日期 的字段 我不希望这是一个字段 我希望它从服务器获取日期并将其自动放入数据库中
  • iPhone - 让 VoiceOver 宣布标签文本更改

    如果标签上的文本发生更改 是否可以使用 iPhone 上的 VoiceOver 来宣布更新后的文本 这类似于 ARIA 中的实时区域 Thanks 您可以使用 VoiceOver 朗读您喜欢的任何文本 UIAccessibilityPost
  • 如何保存我更改的网格中的行

    我使用 ng resource 从服务器获取数据 然后将数据放入表格网格中 如下所示 div div
  • JObject ToString 与 StringEnumConverter 不起作用

    我正在尝试序列化一个匿名类 如下所示 public enum ErrorCode A B C var response JObject FromObject new Error new Message Test Code ErrorCode
  • 无法更改 Visual Studio 2013 中的字体

    我曾经可以通过以下方式更改 Visual Studio 2013 的字体和颜色Tools gt Options then Environment gt Fonts and Colors 最后显示文本编辑器的设置 但是 现在我无法显示文本编辑
  • 使用 Tiny Scrollbar 自动滚动到 div 底部

    我正在编写一个shoutbox 并使其尽可能用户友好 它使用微型滚动条插件 http plugins jquery com project tinyscrollbar对于 jQuery 我想合并一个额外的函数 让我可以让它到达底部div 它