背景图片滚动，点击控制

Question

在一个网页上，我有一个名为 posts 的 div，在这个 divs 中有几个名为 post 的 divs，都带有背景图像。我设法写了一个代码来滚动滚动条时滚动背景图像，body 滚动。它完美运行。

这是我的 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、body滚动到下一个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) {
        }
    });

它也很好用。

但我的问题是，在手动滚动页面转到下一张图片后，如果我单击 arrow_down，body 将滚动到已查看图片的下一张图片（就像看到的图像被记住了一样）。所以 2 个箭头控件与我的手动滚动不同步。

事实上，我想我需要检查哪些 post div 是可见的，当点击 arrow_down 时，滚动到下一个 post。不知道你明白我的意思了吗？

这里有一个很好的理解方式：手动滚动到图像 3（用鼠标，而不是通过单击），然后单击箭头 down.logically 你应该转到第 4 张图像......但它会滚动到图像 2，因为手动滚动是未检测到，你应该从图像 1 开始，所以图像 1 + 1 = 图像 2

我可以为每个 post div 添加唯一 ID，我认为这是一个很好的开始，但我现在卡住了...

这里有一个 jsfiddle 可以看到它的实际效果：

http://jsfiddle.net/0hd2k2jf/6/

希望有人能帮我解决这个问题，也许还有另一种方法...但我确实需要保留背景图片幻灯片。

另一种方法是添加两个按钮，arrow_up 和 arrow_down。当点击它时，它会像默认滚动条一样滚动我的 window，就像旧浏览器的滚动条一样。 arrow_up 和 arrow_down 将与我的滚动条同步。这实际上是完美的解决方案，但我找不到任何资源或方法。也许一些body 可以帮助解决这个问题？

Answer 1

我已将以下 JS 添加到 window 滚动事件中：

    var scrollTop = $(window).scrollTop();
    var postHeight = $('#posts').height();
    position = parseInt((scrollTop + (postHeight/2)) / postHeight);

基本上，每次滚动 window 时，我们都会得到我们所在的位置。如果您在其中一篇文章中的位置超过一半，它会将您滚动到下一篇；反之亦然。

http://jsfiddle.net/q7x0y0q2/

您可能希望将 prev 函数更改为仅在位置大于 0 时递减该位置：

prev.click(function(evt) {
    //Scroll to prev position    
    if(position > 0){
        position -= 1;
    }
    scrollToPosition(posts[position]);
    if (position === 0) {
    }
});

http://jsfiddle.net/q7x0y0q2/1/

Answer 2

您需要找出当前 div 用户正在查看的内容，以便您可以使用向上和向下按钮。

var post_size=$(".post").height() #is the height of a single post

在向上和向下按钮上单击您需要 divide 当前滚动位置与 post_size 以获得用户正在查看的 post假设所有 post 大小相同。

next.click(function(evt) {
    console.info($(document).scrollTop());
    console.info(post_size);

    var currentPage=Math.round($(document).scrollTop()/post_size); //get the current post the user is looking at

    console.info("next "+currentPage);
    //Scroll to next position
    if (currentPage === posts.length - 1) {
        console.info('at the end');
    }else{
        scrollToPosition(posts[currentPage+1]);
    }

});

休息，我使用了与您相同的代码来滚动到正确的 post。 scrollTo 不能在我的浏览器上运行，所以用对我有用的东西更新它，随时更改它。

/* BACKGROUND SCROLL*/
var lastpost = $(".post").last().offset().top
var page = 1
var loading = false
var scrolling =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

    });

  }
});

/* ARROW CONTROLS */

function scrollToPosition(element) {
  if (element !== undefined) {
    $('html, body').finish();
    scrolling=true;
    console.info('scrolling to ' + $(element).offset().top);
    $('html, body').animate({
      scrollTop: $(element).offset().top
    }, 2000,function(){scrolling=false;});
  }
}

//Create an Array of posts
var posts = $('.post');
var position = 0; //Start Position
var next = $('.arrow_down');
var prev = $('.arrow_up');

//Better performance to use Id selectors than class selectors
next.click(function(evt) {
  var post_size = $(".post").height();
  console.info($(document).scrollTop());
  console.info(post_size);

  var currentPage = Math.round($(document).scrollTop() / post_size);

  console.info("next " + currentPage);
  //Scroll to next position
  if (currentPage === posts.length - 1) {
    console.info('at the end');
  } else {
    scrollToPosition(posts[currentPage + 1]);
  }

});

prev.click(function(evt) {
  
  var post_size = $(".post").height();
  console.info($(document).scrollTop());
  console.info(post_size);

  var currentPage = Math.round($(document).scrollTop() / post_size);
  console.info('prev ' + currentPage);
  //Scroll to prev position    
  if (currentPage === 0) {} else {
    scrollToPosition(posts[currentPage - 1]);
  }
});

#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%;
}
.controls {
  position: fixed;
  z-index: 1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <div class="arrow_up">Up</div>
  <div class="arrow_down">Down</div>
</div>


<div id="posts" class="hidden-md hidden-xs hidden-sm">
  <div class="post format_L photo" style="background-image:url(http://images.akamai.steamusercontent.com/ugc/547511114426230968/6E44158F7B8B19739ABF834A1C524A1D6BBCD687/)" alt="mmm artisanal" id="1"></div>
  <div class="post format_L photo" style="background-image:url(http://2.bp.blogspot.com/-AgPay1JWsEQ/UpDLUnqCTgI/AAAAAAAAAdQ/VrgFrHCgGbw/s1600/512px-Number_2_in_light_blue_rounded_square.svg.png)" alt="mmm artisanal" id="2"></div>
  <div class="post format_L photo" style="background-image:url(http://lavoiedesreves.olympe.in/wordpress/wp-content/uploads/2014/03/reve-chiffre-3.jpg)" alt="mmm artisanal" id="3"></div>
  <div class="post format_L photo" style="background-image:url(http://meganunchained.weebly.com/uploads/2/4/2/3/24232185/560060_orig.png)" alt="mmm artisanal" id="4"></div>


</div>

背景图片滚动，点击控制

background image scrolling, with click controls

html

css

jquery

onclick

scrollto