jScroll不工作
[英]jScroll not working
问题描述
my jScroll is not working, although I followed the example on http://jscroll.com/#example Am I doing it wrong? 
我的jScroll无效，虽然我按照http://jscroll.com/#example上的例子我做错了吗？ I have very little experience with jQuery. 我对jQuery的经验很少。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="jquery.jscroll.min.js"></script>
<script>
$('.scroll').jscroll();
</script>
</head>
<body>
<div class="scroll">
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</div>
</body>
</html>
3 个解决方案
解决方案1
1 已采纳 2015-09-03 11:16:59
Wait a sec - what are you trying to achieve..? 等一下 - 你想要实现什么......？ Having looked at the documentation for jScroll, I'm not sure you're using it as intended. 看了jScroll的文档后，我不确定你是否按预期使用它。
It's for lazy loading . 它适用于延迟加载 。 That means, you have: 这意味着，你有：
Content...... Content...... Content...... Content...... Content...... Content...... Content...... Content...... Content...... Content...... Content...... 内容......内容......内容......内容......内容......内容......内容......内容......内容......内容......内容......
[Link to more content]
When you scroll down to [Link to more content] , it'll load the content from that page. 当您向下滚动到[Link to more content] ，它将加载该页面中的内容。
Are you trying to have your 'very long content' fixed in a box with a scrollbar? 您是否尝试将“非常长的内容”固定在带滚动条的框中？ If so, use CSS for that... 如果是这样，请使用CSS ...
div.scroll {
height: 200px;
overflow: auto;
background:#ffe;
}
http://jsfiddle.net/jy3v2n25/ http://jsfiddle.net/jy3v2n25/
Try and wrap your
$('.scroll').jscroll();
尝试并包装你的
$('.scroll').jscroll();
in
$(document).ready() .
在
$(document).ready() 。
<script> $(document).ready(function(){ $('.scroll').jscroll(); }); </script>
解决方案2
1 2016-12-16 15:44:38
Without using a framework example run: 不使用框架示例运行：
https://jsfiddle.net/Limitlessisa/t8wk1o8L/8 https://jsfiddle.net/Limitlessisa/t8wk1o8L/8
Html: HTML：
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div id="comments_area" next="/user/login">Null</div>
Js: JS：
window.addEventListener('scroll', function(evt) {
if(lij){lijScroll();}
});
var lij=true;
var lijScroll= function(){
var elem=$('#comments_area');
if(!elem.length){
lij=false;
return false
}
var scrollingElement = document.scrollingElement || document.documentElement; // all browser + Firefox
var distance_from_top = scrollingElement.scrollTop;
var elementPos = elem.offset().top - $(window).height();
if(distance_from_top>elementPos){
lij=false;
$(elem).html('Loading...');
$.ajax({
type: 'POST',
url: $(elem).attr('next'),
data: null,
dataType: 'html',
context: document.body
}).done(function(data) {
$(elem).html(data);
});
}
}
解决方案3
1 2017-08-29 12:45:08
I liked the Script of Limitless isa that much, i improved it to use jquery. 我喜欢无限的脚本isa那么多，我改进它使用jquery。
It loads elements from a link, and then appends them into a div element. 它从链接加载元素，然后将它们附加到div元素中。
$(function() {
var lij=true;
var newrun = 0;
var oldrun = 0;
var lijScroll= function() {
if(newrun > oldrun) {
return;
}
newrun++;
var cont=$('#list');
var elem=$('#next');
var scrollingElement = document.scrollingElement || document.documentElement; // all browser + Firefox
var distance_from_top = scrollingElement.scrollTop;
var elementPos = elem.offset().top - $(window).height();
if(distance_from_top>elementPos) {
$(elem).html('Loading...');
$.ajax({
type: 'POST',
url: $(elem).attr('href'),
data: null,
dataType: 'html',
context: document.body
}).done(function(data) {
datawrap = '<div>'+data+'</div>';
datadom = $(datawrap);
oldlist = "";
cont.find('.grid-item').each(function(index) {
oldlist += $(this)[0].outerHTML;
});
//alert("oldlist: "+oldlist);
appendlist = "";
$(datadom).find('.grid-item').each(function(index) {
appendlist += $(this)[0].outerHTML;
});
//alert("appendlist: "+appendlist);
nextlink = $(datadom).find("#next")[0].outerHTML;
//alert("nextlink: "+nextlink);
$(cont).html(oldlist+appendlist);
$(elem).replaceWith(nextlink);
//lij = false; //Break after first run old impl
oldrun++;
});
}
}
window.addEventListener('scroll', function(evt) {
//if(lij) { lijScroll(); } //Old single run impl
lijScroll();
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.