• 相对漂亮的滚动条slimscroll可以实现下拉加载


    在之前的开发中遇到过下拉加载想要漂亮点的滚动条,但是最初引入的mCustomScrollbar发现不适合我当前的下拉加载模式(当然肯定有其他办法,但是我习惯了现在的下拉加载模式)。

    我的下拉加载用的是检测滚动条位置来判断是否加载更多

    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0; //滚动到的当前位置
    var $frame = $("#div_content");
    var nDivHight = $frame.height()+10;
    $frame.on("scroll touchmove", function () {
    nScrollHight = $(this)[0].scrollHeight;
    nScrollTop = $(this)[0].scrollTop;
    if (Number(nScrollTop) + Number(nDivHight) >= Number(nScrollHight)) {
    // 触发事件,这里可以用AJAX拉取下页的数数据
    listMore();
    };
    });

    如果用mCustomScrollbar.js就检测不了滚动条位置,因为它滚动的机制是用绝对定位,然后改变top;

    而且mCustomScrollbar用起也比较麻烦,要引入js和css。

    后来发现了slimscroll能适应我的下拉加载模式,slimscroll的使用方法就是给传统滚动需要设置overflow-y:auto的容器执行一个方法

    $('#div_content').slimScroll({
    height: 'auto',
    color: '#000',
    //size:"7px",
    alwaysVisible: true,
    railVisible: true,
    railColor: '#333333',
    railOpacity: 0.2,
    wheelStep: 10,
    disableFadeOut: true
    });

    这下我就有了相对漂亮的滚动条实现下拉加载拉

    插件和使用方法说明:https://files.cnblogs.com/files/qiny-easyui/slimScroll201603221516.zip

  • 相关阅读:
    showModalDialog 超过问题
    工作流,WEB框架,UI组件网络收集整理
    VSS使用方法详解
    Windows远程桌面连接命令mstsc
    Nginx 配置简述
    jQuery编程代码规范的最佳实践
    TinyMCE(富文本编辑器)在Asp.Net中的使用方法
    扣文转文方法
    VS2013 EMMET插件学习
    为革命保护视力 --- 给 Visual Studio 换颜色
  • 原文地址:https://www.cnblogs.com/qiny-easyui/p/5311442.html
Copyright © 2020-2023  润新知