我正在创建一个分页系统(有点像Facebook),当用户滚动到底部时,内容会加载.我想最好的方法是找到用户位于页面底部并运行ajax查询以加载更多帖子.
唯一的问题是我不知道如何检查用户是否已使用jQuery滚动到页面底部.有任何想法吗？
我需要找到一种方法来检查用户何时使用jQuery滚动到页面底部.
我想在用户滚动到页面底部时实现内容加载.
我遇到了问题.它适用于桌面浏览器,但不适用于移动设备.我已经实现了一个脏修复程序,使其在iPhone上运行,但不是最佳,因为它不适用于其他大小的移动设备.
我的网站是www.cristianrgreco.com,向下滚动以查看效果
问题是添加滚动和高度不等于移动设备的高度,而它们在桌面浏览器上.
有没有办法检测移动浏览器？
提前致谢.
以下是当前使用的代码:
$(document).ready(function () {
$(".main").hide().filter(":lt(3)").show();
if ($(document).height() == $(window).height()) {
// Populate screen with content
}
else if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
window.onscroll = function () {
if ($(document).height() - $(window).scrollTop() <= 1278) {
// At the moment only works on iPhone
}
}
}
else {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
// Works perfect for desktop browsers
}
})
}
})
我有这个我通过Id引用的元素:
let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');
当浏览器到达元素的底部时我需要监听.
怎么做到这一点？
我知道这个问题已经在这个论坛上被问了一百万次,但没有一篇文章帮助我找到解决方案.
我做了一小段jquery代码,当你向下滚动到与hash-link中id相同的部分时,它会突出显示hash-link.
$(window).scroll(function() {
var position = $(this).scrollTop();
$('.section').each(function() {
var target = $(this).offset().top;
var id = $(this).attr('id');
if (position >= target) {
$('#navigation > ul > li > a').attr('href', id).addClass('active');
}
});
});
现在的问题是它突出显示所有哈希链接,而不仅仅是该部分与之关系的哈希链接.任何人都可以指出错误,还是我忘记了什么？
如果我有一个包含iframe的网站:
<html>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<iframe src="http:/somelink.com/iframe.html"></iframe>
</body>
</html>
那么iframe是否可以知道它是否可以被"看到"？这例如通过知道与屏幕顶部相关的iframe的顶部位置.
这是我的测试iframe :(所有值都是0,无论父级的滚动位置)
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log("ok");
check();
});
function check() {
// position of parent
var parentScrollTop = $(window.parent.document).scrollTop();
console.log("parentScrollTop: "+parentScrollTop);
// self position
var bodyPosition = $("body").position().top;
console.log("body position: "+bodyPosition);
setInterval(check, 1000);
}
</script>
<style type="text/css">
body {
background-color: red;
}
</style>
</head>
<body>
</body>
</html> …我找到了经典的MDN 公式来检查内容是否已滚动到底部，
element.scrollHeight - element.scrollTop === element.clientHeight
不再适用于所有情况。例如，如果您将MDN 上的演示页面的内容比例更改为大于 100%，您将不会获得正确的结果。发生这种情况是因为现在浏览器在元素上使用亚像素精度。特别scrollTop是现在不是 100% 的比例是小数值。实际上，问题的发生是因为===上面公式中的符号。
那么最简单但仍然可靠的解决方案是什么？
我看到一些jekyll博客使用disqus作为评论,评论部分不会加载,直到你滚动到页面底部.
我怎么处理这个？
我尝试过这样的事情:
<div id="disqus_thread"></div>
<div id="disqus_loader" style="text-align: center">
<button onclick="load_disqus()">Load Disqus Comments</button>
<script>
function load_disqus()
{
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = "http://[YOUR-DISQUS-SHORTNAME].disqus.com/embed.js";
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
var ldr = document.getElementById('disqus_loader');
ldr.parentNode.removeChild(ldr);
}
</script>
</div>
单击按钮以加载disqus.但我想知道当我滚动到页面底部时如何加载它.
我试图在用户向下滚动并到达页面底部时触发一个事件。
我在互联网上搜索并在 stackoverflow 中找到了一些帖子，但出乎意料的是，答案对我不起作用。
例如：检查用户是否滚动到底部
使用上述 SO 帖子给出的答案，我尝试触发的事件在到达页面顶部而不是底部时执行。
如果我出错了，请告诉我：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
loadmore();
}
});
function loadmore(){
var lastProd = $('.product_div').last();
var lastProdID = $('.product_div').last().prop('id');
//console.info(lastProdID); return false;
//var val = document.getElementById("row_no").value;
$.ajax({
type: 'post',
url: 'includes/load_products.php',
data: { getresult:lastProdID },
success: function (response) {
console.log(response);
//var content = document.getElementById("all_rows");
//content.innerHTML = content.innerHTML+response;
lastProd.after(response);
// We increase the value by 10 because we limit the results by 10
// document.getElementById("row_no").value = Number(val)+10;
}
}); …