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>

  • 相关阅读:
    海量数据处理:十道面试题与十个海量数据处理方法总结
    C++中的static及内存分配
    面试时如何向面试官提问
    面试题3:斐波那契数列与爬楼梯
    面试题1:二进制中1的个数
    面试题:单链表的几种处理
    js网页下载csv格式的表格
    解决背景图文字盖住html里面的dom元素
    使用element-ui的常见问题
    Promise-async-await处理函数
  • 原文地址:https://www.cnblogs.com/cxxjohnson/p/4999309.html
Copyright © 2011-2022 走看看