jquery自动滚动展厅

Question

我尝试建立一个类似于this 的网站。为此，我编写了以下代码：

var $window = $(window);
var lastScrollTop = 0;
var shown_elements = 0;
var next_element = 0;
$window.on('scroll', scroll_to_next);
$window.trigger('scroll');

var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
var scroll = $(window).scrollTop();

function scroll_to_next() {

  shown_elements = Math.ceil($(window).scrollTop() / window_height);
  next_element = shown_elements * window_height;
  if (lastScrollTop < $(window).scrollTop() && lastScrollTop != 0) {
    //$window.scrollTop(next_element);
    $('html, body').animate({
      scrollTop: next_element
    }, 'slow');
    //alert(next_element);
  }
  lastScrollTop = $(window).scrollTop();
}

这是 HTML：

<div class="showroom1">
  <div class="showroom_left">
    <img class="fixed" src="mokups/frame.png">
    <img class="screen" src="mokups/screen2.png">
  </div>
  <div class="showroom_right">
    <h3>Hello</h3>
    <h4>description</h4>
  </div>
</div>

<div class="showroom2">
  <div class="showroom_left">
    <img class="screen" src="mokups/screen1.png">
  </div>
  <div class="showroom_right">
    <h3>Hello</h3>
    <h4>description</h4>
  </div>
</div>
<div class="showroom1">
  <div class="showroom_left">
    <img class="fixed" src="mokups/frame.png">
    <img class="screen" src="mokups/screen2.png">
  </div>
  <div class="showroom_right">
    <h3>Hello</h3>
    <h4>description</h4>
  </div>
</div>

此代码第一次运行。并自动滚动到第二个“陈列室”。但是当我再次尝试滚动页面时，页面将不会滚动。

我的代码有什么问题？

Answer 1

我创建了一个 JSFiddle 一段时间，以解决另一个具有相同问题的问题。 https://jsfiddle.net/8zgsdzy0/

代码如下：

var lastScrollPos = 0;
var scrollFired = false;

var textConainersElement = jQuery('.text-container p');
var mainElem = jQuery("[data-main='true']");
var firstElem = jQuery("section:first-child");
var lastElem = jQuery("section:last-child");
var wrapper = jQuery(".wrapper");

jQuery(document).on('DOMMouseScroll mousewheel', function(e) {

  // if the scroll has occrued already then dont fire it again until transition ended
  if (scrollFired == true) {
    jQuery(window).scrollTop(lastScrollPos);
    return false;
  }

  var inviewElem = jQuery("[data-inview='true']");
  var nextElem = inviewElem.next();
  var prevElem = inviewElem.prev();
  var currentTop = parseInt(firstElem.attr('data-top'));



  if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
    // Scrolling down 
    // if viewed element is last element do nothing
    if (inviewElem.index() >= lastElem.index())
      return false;

    // if main section is inview then scroll through its elements
    if (inviewElem.index() == mainElem.index()) {
      // if the active child is not the last element then process
      var active = jQuery('.text-container .active');
      if (active.index() != textConainersElement.length - 1) {
        jQuery('.text-container .active').removeClass('active').next().addClass('active');

        // Dont scroll further
        return false;
      }
    }

    var top = currentTop + 100;
    firstElem.css("margin-top", "-" + top + "vh").attr("data-top", top);
    nextElem.attr("data-inview", 'true');
    inviewElem.attr("data-inview", 'false');

  } else {
    // Scrolling up 
    // if viewed element is first element do nothing
    if (inviewElem.index() <= firstElem.index())
      return false;

    // if main section is inview then scroll through its elements
    if (inviewElem.index() == mainElem.index()) {
      // if the active child is not the last element then process
      var active = jQuery('.text-container .active');
      if (active.index() != 0) {
        jQuery('.text-container .active').removeClass('active').prev().addClass('active');

        // Dont scroll further
        return false;
      }
    }

    var top = currentTop - 100;
    firstElem.css("margin-top", "-" + top + "vh").attr("data-top", top);
    prevElem.attr("data-inview", 'true');
    inviewElem.attr("data-inview", 'false');
  }

  // Set values to use for next scrolling event
  lastScrollPos = jQuery(window).scrollTop();
  scrollFired = true;

  // reset scrollFired var after transition ended
  firstElem.one('transitionend', function() {
    scrollFired = false;
  });

  //prevent page fom scrolling
  return false;
});

body {
  margin: 0;
}
.wrapper {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
section {
  display: block;
  width: 100%;
  height: 100vh;
  border-bottom: 2px dashed black;
  position: relative;
  transition: all 0.5s;
  background-color: #c4c4c4;
}
section[data-inview="true"] {
  background-color: #929292;
}
.phone-container {
  align-items: center;
  background: #dedede none repeat scroll 0 0;
  border-left: 5px solid black;
  display: flex;
  float: right;
  height: 100vh;
  justify-content: center;
  width: 500px;
}
.phone {
  width: 200px;
  height: 500px;
  background: #A6A6A6 none repeat scroll 0 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
section.long-scroll {
  height: auto;
}
p {
  margin-top: 80px;
}
p:first-child {
  margin-top: 0px;
}
.text-container {
  float: left;
  width: 200px;
}
.spacer {
  display: block;
  width: 100%;
}
p.active {
  color: #C1E7FF;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  display: inline-block;
}
/* start commented backslash hack \*/

* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* close commented backslash hack */

.stuck {
  position: fixed;
  top: 0;
}
.fixed {
  position: fixed;
  top: 0;
}
.sticky-wrapper {
  height: auto !important;
}
.text-container {
  padding-left: 40px;
  padding-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <section data-inview='true' data-top='0'>
    Scroll-down
  </section>
  <section class="long-scroll clearfix" id="pin" data-main='true'>
    <div class="text-container">
      <p class="active">Text - 1</p>
      <p>Text - 2</p>
      <p>Text - 3</p>
      <p>Text - 4</p>
    </div>

    <div class="phone-container">
      <div class="phone">Slide-1</div>
    </div>
  </section>
  <section id="unhook"></section>
</div>

Answer 2

请将你的函数 scroll_to_next() 添加到 $(window).scroll();

由于您没有捕获 $(window) 提供的滚动事件。所以这是第一次发生。

Example

Answer 3

我认为问题出在这行代码上：

if (lastScrollTop < $(window).scrollTop() && lastScrollTop != 0)

具体

lastScrollTop != 0

代码第一次运行时变量“lastScrollTop”被设置为0，所以if语句判断为false并且不滚动，但是变量“shown_elements”和“next_element”是改变了。第二次通过“lastScrollTop”运行代码已更改，但由于其他变量已更改，因此无法正常工作。

解决办法大概是改一下if语句，改成“lastScrollTop != 0”。