Fatal编程技术网
  • javascript/
  • Javascript 使用jquery获取垂直滚动的最大值

Javascript 使用jquery获取垂直滚动的最大值

javascript jquery

Javascript 使用jquery获取垂直滚动的最大值,javascript,jquery,javascript-events,Javascript,Jquery,Javascript Events,这是我的视图代码，我使用jquery，它可以工作，在我更改屏幕分辨率之前，我没有任何问题，它停止工作。我知道问题出在哪里，但我无法解决。请看代码： @model PNUBOOKIR.Models.ProductModels @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Index</title> <script src="

这是我的视图代码，我使用jquery，它可以工作，在我更改屏幕分辨率之前，我没有任何问题，它停止工作。我知道问题出在哪里，但我无法解决。请看代码：

    @model PNUBOOKIR.Models.ProductModels
@{
    Layout = null;           
}

<!DOCTYPE html>
<html>
<head>

<title>Index</title>
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>    
<script type="text/javascript">
    var endRun = false;
    var PageNO = 1;
    $(window).scroll(function () {
        if ((($("#container").outerHeight() - 796) == ($(this).scrollTop())) && (!endRun)) {
            endRun = true;
            Load();
        }
    });

    $(document).ready(function () {
        Load();
        return false;
    });

    function Load() {
        var BtnShowMore = document.getElementById("BtnShowMore");
        BtnShowMore.innerHTML = "Loading...";
        $.ajax({ type: "Post",
            url: "Product" + "/" + "GetHomeEventAjax",
            data: "{" + "PageNO" + ":" + PageNO + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function succ(data, states) {
                if (states == "success") {
                    if (data.Content != null) {
                        var EventListArea = document.getElementById("result");
                        $('#result > tbody:last').append(data.Content);
                        PageNO = PageNO + 50;
                        BtnShowMore.innerHTML = "More";
                        endRun = false;
                    }
                    else BtnShowMore.innerHTML = "Loading is complete";
                }
            },
            error: function err(result) { alert(result.responseText); }
        });
    }        
</script>
</head>
<body>
    <div id="container">
        <table cellpadding="4" cellspacing="2" border="1" style="width: 450px; direction: rtl;"
            id="result">
            <tbody>
                <tr>
                    <th>کد کالا</th>
                    <th>نام کتاب</th>
                    <th>ناشر</th>
                </tr>
            </tbody>
        </table>
        <a style="width: 200px" id="BtnShowMore">
            Load</a>
    </div>
</body>
</html>

@model PNUBOOKIR.Models.ProductModels
@{
布局=空；
}
指数
var-endRun=false；
var PageNO=1；
$（窗口）。滚动（函数（）{
如果（（$（“#容器”）.outerHeight（）-796）=（$（this.scrollTop（））&&（！endRun））{
endRun=true；
加载（）；
}
});
$（文档）.ready（函数（）{
加载（）；
返回false；
});
函数加载（）{
var BtnShowMore=document.getElementById（“BtnShowMore”）；
BtnShowMore.innerHTML=“正在加载…”；
$.ajax（{type:“Post”，
url:“产品”+“/”+“GetHomeEventAjax”，
数据：“{”+“页码”+：“+PageNO+”}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能成功（数据、状态）{
如果（状态==“成功”）{
if（data.Content！=null）{
var EventListArea=document.getElementById（“结果”）；
$（'#result>tbody:last'）.append（data.Content）；
PageNO=PageNO+50；
BtnShowMore.innerHTML=“更多”；
endRun=false；
}
else BtnShowMore.innerHTML=“加载完成”；
}
},
错误：函数err（result）{alert（result.responseText）；}
});
}        
کد کالا
نام کتاب
ناشر
负载
在scroll事件脚本中，我需要找出垂直滚动的最大值是多少，这样我就得到了容器的外部高度，但它不是最大值，它比1280x1024屏幕分辨率中的值大796px，在不同的屏幕分辨率设置中可能会有所不同。我需要一些帮助，应该用什么来代替“796”号码。

试试：

$("#container").attr({ scrollTop: $("#container").attr("scrollHeight") });
从JQuery 1.9.1开始，您需要：

$("#container").scrollTop($("#container").prop("scrollHeight"));
在不使用jQuery的情况下执行此操作的最佳方法

document.getElementById('container').scrollTop = document.getElementById('container').scrollHeight;
使用jQuery对我来说不起作用，因此如果上面有问题，请尝试使用此选项。

发布的答案不正确；
scrollTop
的最大值不是
scrollHeight
，而是
scrollHeight-outerHeight

这将为您提供正确的值：

var elem = $("#container");
var maxScrollTop = elem[0].scrollHeight - elem.outerHeight();
它返回[object]，我该怎么处理它？什么都没有。你只要拨那条线就行了。但是796号怎么样？我必须把它去掉？你能给你的答案加上更多的描述吗？对不起，它更倾向于为你指明方向，而不是为你做。基本上，只要您想滚动到#容器的底部，就调用该行代码。它完全替换了代码中的整个$（window）.scroll（）部分（但是您必须处理我在那里看到的函数调用）。这不适用于jQuery 1.9.1。.attr（'scrollHeight'）返回未定义的，但是.prop（'scrollHeight'）会执行此操作。在1.6中添加了prop（）。你救了我一天：D