如何减慢div自动滚动

时间:2017-11-15 15:05:18

标签: javascript ajax

我找到了一个无限滚动here的例子,它在原始状态下按预期工作,我从链接中得到它但是当我修改它以满足我的需要时,滚动的灵敏度会发生变化并变得狂野。所以我的目标是减慢滚动并显示加载。 ajax调用返回new JsonResult。我唯一改变的是代替硬编码newDiv.innerHTML我做了一个ajax调用,返回一个对象。

JS:

$(document).ready(function () {

    document.getElementById("scroll-content").addEventListener("scroll", function (event) {

        $.ajax({
            type: "GET",
            url: "/api/socialapi/5", // <-- Where should this point?
            contentType: "application/json; charset=utf-8",
            beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            dataType: "json",
            success: function (gData) {
                var res = $.parseJSON(gData);
                var newDiv = document.createElement("div");
                newDiv.innerHTML = res.Query;
                document.getElementById("scroll-content").appendChild(newDiv);
            },
            error: function (errormessage) {
                alert("Failed");
            }
        })

    });



    var checkForNewDiv = function () {
    var lastDiv = document.querySelector("#scroll-content > div:last-child");
    var maindiv = document.querySelector("#scroll-content");
    var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;
    var pageOffset = maindiv.offsetTop + maindiv.clientHeight;
    if (pageOffset > lastDivOffset - 10) {
        var newDiv = document.createElement("div");
        newDiv.innerHTML = "my awesome new div2";
        document.getElementById("scroll-content").appendChild(newDiv);
        checkForNewDiv();
    }
    };

checkForNewDiv();
});

C#方法:

static int cc = 0;
// GET api/values/5
[HttpGet("{id}")]
public IActionResult Get(int id)
{
    var jssp = new JSViewEditSocialQuery { presetid = "2", Query = "Test" + cc };        
    cc++;
    return new JsonResult(JsonConvert.SerializeObject(jssp));
}

CSHTML:

<div class="Column">
    <div id="scroll-content">
        <div>test div</div>
    </div>
</div>

0 个答案:

没有答案