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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6027278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:56:15  来源:igfitidea点击:

getting the maximum value of vertical scroll using jquery

javascriptjqueryjavascript-events

提问by kamiar3001

This is my view code I used jquery it works and I didn't have any problem until I have changed the screen resolution it stops working. I know where is the problem but I can't solve it look at the code :

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

In the scroll event script I need to found out what is the maximum value of vertical scroll so I get the container outer-Height but is wasn't exactly the maximum value it is 796px greater than it in the 1280x1024 screen resolution it can be different in different screen resolution setting. I need some help what should be instead of "796" number.

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

采纳答案by dtbarne

Try:

尝试:

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

Starting from JQuery 1.9.1, you'll need:

从 JQuery 1.9.1 开始,您将需要:

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

回答by BlueRaja - Danny Pflughoeft

The posted answer is incorrect; the maximum value of scrollTopis not scrollHeight, it's scrollHeight - outerHeight.

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



This will give you the correct value:

这将为您提供正确的值:

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

回答by Ishan Dhingra

Best way to do this with-out jQuery.

最好的方法是在没有 jQuery 的情况下做到这一点。

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

using jQuery it did't worked for me, so try this one if having problem with above.

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