我找到了一个无限滚动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>