Question

在网页上，我有一个名为posts的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) {
        }
    });

它也可以。

但我的问题是，在手动滚动页面转到下一个图像后，如果我点击arrow_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将与我的滚动条同步。这实际上是完美的解决方案，但我找不到任何资源或方式。也许有人可以帮忙解决这个问题？

Answer 1

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

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

在向上和向下按钮上单击，您需要将当前滚动位置与post_size分开以获取用户正在查看的帖子，假设所有帖子大小相同。

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]);
    }

});

Rest我使用与你相同的代码滚动到正确的帖子。 scrollTo没有在我的浏览器上工作，所以使用适合我的东西更新它可以随意更改它。

＆＃13;

/* 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]);
  }
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

基本上，每次滚动窗口时我们都会得到我们的位置。如果你超过其中一个帖子的一半，它会滚动到下一个帖子;反之亦然。

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/

背景图片滚动，点击控件

2 个答案: