zoukankan      html  css  js  c++  java
  • 相对漂亮的滚动条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

  • 相关阅读:
    flask与Django的区别
    flask特殊装饰器
    flaskjinjia2模板
    flask类视图
    flask路由系统
    flask初识
    python2与python3 的安装与环境变量的添加
    WebGL_0007:强制横屏的参考
    NodeJS_0011:nodejs重定向到一个链接或本地的页面的方法
    NodeJS_0006:nodejs响应超时处理
  • 原文地址:https://www.cnblogs.com/qiny-easyui/p/5311442.html
Copyright © 2011-2022 走看看