Jquery automatic scroll showroom

Question

I tried to build a website similar to this. To do this I wrote the following code:

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

This is the 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>

This code runs the first time. And scroll automatically to the second "showroom". But when I try to scroll a second time the page will not scroll.

What is wrong with my code?

can you create a jsfiddle for that? – Aminur Rashid Jan 06 '17 at 17:12 — Aminur Rashid, Jan 06 '17 at 17:12

score 1 · Accepted Answer · answered Jan 07 '17 at 09:01

I created a JSFiddle a while a go for another question with the same issue. https://jsfiddle.net/8zgsdzy0/

Here is the code:

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>

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

Please add your function scroll_to_next() to $(window).scroll();

Since you are not capturing the scroll event provided by $(window). So it happens for the first time.

Example

edited May 23 '17 at 12:24

Community

1
1

answered Jan 05 '17 at 20:16

Arpit Agarwal

471
1
4
15

score 0 · Answer 3 · answered Jan 06 '17 at 20:39

I think the problem is with this line of code:

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

Specifically

lastScrollTop != 0

The first time the code runs through the variable "lastScrollTop" is set to 0, so the if statement evaluates false and doesn't scroll, but the variables "shown_elements" and "next_element" are changed. The second time you run the code through "lastScrollTop" has been changed but it doesn't work as you would expect as the other variables have been changed.

The solution is probably to change the if statement and change "lastScrollTop != 0".

Jquery automatic scroll showroom

3 Answers3