【发布时间】：2015-11-16 21:49:40
【问题描述】：
在一个网页上，我有一个名为 posts 的 div，在这个 div 内有几个名为 post 的 div，都带有背景图片。 我设法编写了一个代码来滚动滚动条、正文滚动时滚动背景图像。 效果很好。
这是我的html：
<div id="posts" class="hidden-md hidden-xs hidden-sm">
<div class="post format_L photo" style="background-image:url(http://www.mmdwc.com/wp-content/uploads/1210-807-2.jpg)" alt="mmm artisanal" id="1"></div>
<div class="post format_L photo" style="background-image:url(http://www.mmdwc.com/wp-content/uploads/1210-807-3.jpg)" alt="mmm artisanal" id="2"></div>
<div class="post format_L photo" style="background-image:url(http://www.mmdwc.com/wp-content/uploads/1210-807.jpg)" alt="mmm artisanal" id="3"></div>
</div>
我的 CSS ：
#posts {
display: inline-block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.post {
background-size: auto 80%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
还有我的 jquery：
/* BACKGROUND SCROLL*/
var lastpost = $(".post").last().offset().top
var page = 1
var loading = false
$(window).scroll(function(){
if (loading) return;
if ($(window).scrollTop() > lastpost - window.innerHeight*1.5) {
loading = true
var $div = $("<div>")
$div.load("/page/" + (++page) + " .post", function(){
$("#posts").append($div.find(".post"))
lastpost = $(".post").last().offset().top
loading = false
});
}
});
现在我正在尝试添加 2 个 div，一个名为 arrow_down，另一个名为 arrow_up，当单击 arrow_down 时，正文滚动到下一个 div，当单击 arrow_up 时，我们滚动到上一个 div。
这是我的html：
<div class="controls">
<div class="arrow_down">Down</div>
<div class="arrow_up">Up</div>
</div>
我的 CSS ：
.controls {
position : fixed;
z-index: 1000;
}
还有我的 jquery：
function scrollToPosition(element) {
if (element !== undefined) {
$("body, html").scrollTo(element, 800, {
margin: true
});
}
}
//Create an Array of posts
var posts = $('.post');
var position = 0; //Start Position
var next = $('.arrow_down');
var prev = $('.arrow_up');
next.click(function(evt) {
//Scroll to next position
scrollToPosition(posts[position += 1]);
if (position === posts.length - 1) {
}
});
prev.click(function(evt) {
//Scroll to prev position
scrollToPosition(posts[position -= 1]);
if (position === 0) {
}
});
它也可以正常工作。
但我的问题是，在手动滚动页面以转到下一个图像后，如果我单击箭头_down，则正文会滚动到已查看图像的下一个图像（就像已记住已查看图像一样）。所以 2 个箭头控件与我的手动滚动不同步。
事实上，我想我需要检查哪些帖子 div 是 inview 的，并且在单击 arrow_down 时，滚动到下一个帖子。不知道你明白我的意思吗？
这是一个很好的理解方式： 手动滚动到图像 3（使用鼠标，而不是单击），然后单击向下箭头。从逻辑上讲，您应该转到第 4 个图像...但是它将滚动到图像 2，因为未检测到手动滚动，并且你应该从图像 1 开始，所以图像 1 + 1 = 图像 2
我能够为每个帖子 div 添加唯一的 Id，我认为这是一个好的开始，但我现在被卡住了......
这里有一个 jsfiddle 可以看到它的实际效果：
http://jsfiddle.net/0hd2k2jf/6/
希望有人能帮我解决这个问题，也许还有另一种方法……但我绝对需要保留背景图片幻灯片。
另一种方法是添加两个按钮，arrow_up 和 arrow_down。当点击它时，它会滚动我的窗口，就像默认滚动条一样，就像旧浏览器的滚动条一样。 arrow_up 和 arrow_down 将与我的滚动条同步。这实际上是完美的解决方案，但我找不到任何资源或方法。也许有人可以帮助解决这个问题？
【问题讨论】：
-
小提琴似乎工作正常。无法理解确切的问题。
-
@BhojendraNepal，我已经用第四张图片更新了我的 jsfiddle。手动滚动到图像 3（使用鼠标，而不是单击），然后单击向下箭头。从逻辑上讲，您应该转到第 4 个图像...但是它将滚动到图像 2，因为未检测到手动滚动，你应该从图像 1 开始，所以图像 1 + 1 = 图像 2。你明白我的意思吗？ jsfiddle.net/0hd2k2jf/6
-
抱歉，没有发现任何问题。
-
@BhojendraNepal 请看看我的评论和新的 jsfiddle。
-
@vel，请看一下我的评论和新的 jsfiddle。
标签： jquery html css onclick scrollto