zoukankan      html  css  js  c++  java
  • 滚动条滚动到底部触发事件

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $("#contain").scroll(
    function() {
    var $this = $(this), viewH = $(this).height(), //可见高度
    contentH = $(this).get(0).scrollHeight, //内容高度
    scrollTop = $(this).scrollTop();//滚动高度

    console.log("viewH:" + viewH + " contentH:" + contentH + " scrollTop:" + scrollTop);
    //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
    if (scrollTop / (contentH - viewH) >= 0.95) { //到达底部100px时,加载新内容
    // 这里加载数据..
    alert("这里加载数据..");
    }
    });
    scrollBottomTest = function() {

    }
    })
    </script>
    </head>
    <body>
    <div id="contain"
    style=" 100%; height: 500px; overflow: auto; border: solid red 1px;">
    这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br>
    这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br>
    这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br>
    这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br> 这里加载数据..<br>
    这里加载数据..<br> 这里加载数据..<br>这里加载数据..<br> 这里加载数据..<br>
    这里加载数据..<br> 这里加载数据..<br>这里加载数据..<br> 这里加载数据..<br>
    这里加载数据..<br> 这里加载数据..<br>这里加载数据..<br> 这里加载数据..<br>
    这里加载数据..<br> 这里加载数据..<br>这里加载数据..<br> 这里加载数据..<br>
    这里加载数据..<br> 这里加载数据..<br>这里加载数据..<br> 这里加载数据..<br>
    <div style=" 100%; height: 200px;background:gray; ">

    </div>
    </div>

    </body>
    </html>

  • 相关阅读:
    Winform 打包,卸载程序制作获取ProductCode
    委托/事件的重写
    反序列化无法找到程序集
    Control.Invoke注意事项
    操作config文件
    MemoEdit自动滚动到结尾
    读取局域网内的共享文件
    命令行卸载程序
    获取执行程序的路径
    SCSF 系列:使用 Visualizer 监控 SCSF 运行状态
  • 原文地址:https://www.cnblogs.com/cxxjohnson/p/4999309.html
Copyright © 2011-2022 走看看