【问题标题】:getting the maximum value of vertical scroll using jquery使用jquery获取垂直滚动的最大值
【发布时间】:2011-05-17 06:53:15
【问题描述】:

这是我使用 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>

在滚动事件脚本中,我需要找出垂直滚动的最大值是多少,所以我得到了容器的外部高度,但它不是最大值,它比 1280x1024 屏幕分辨率中的它大 796px在不同的屏幕分辨率设置中可能会有所不同。我需要一些帮助,而不是“796”号码。

【问题讨论】:

    标签: javascript jquery javascript-events


    【解决方案1】:

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


    这将为您提供正确的值:

    var elem = $("#container");
    var maxScrollTop = elem[0].scrollHeight - elem.outerHeight();
    

    【讨论】:

    • 你拯救了我的一天:D
    【解决方案2】:

    试试:

    $("#container").attr({ scrollTop: $("#container").attr("scrollHeight") });
    

    从 JQuery 1.9.1 开始,您需要:

    $("#container").scrollTop($("#container").prop("scrollHeight"));
    

    【讨论】:

    • 它返回 [object Object] 我该怎么处理它?
    • 没什么。您只需拨打该电话即可。
    • 但是我必须删除的数字 796 怎么样?您能否为您的答案添加更多描述
    • 对不起,它更多的是为你指明方向,而不是为你做。基本上,只要你想滚动到#container 的底部,你就调用那行代码。它完全替换了您那里的整个 $(window).scroll() 代码部分(但是您必须处理我在那里看到的函数调用)。
    • 这不适用于 jQuery 1.9.1。 .attr('scrollHeight') 返回 undefined 但 .prop('scrollHeight') 可以解决问题。 .prop() 是在 1.6 中添加的。 api.jquery.com/prop
    【解决方案3】:

    不使用 jQuery 的最佳方法。

    document.getElementById('container').scrollTop = document.getElementById('container').scrollHeight;
    

    使用 jQuery 它对我不起作用,所以如果上面有问题,请尝试这个。

    【讨论】:

      猜你喜欢
      • 2017-06-23
      • 1970-01-01
      • 2011-12-06
      • 2018-02-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多