Window size scroll

Question

Window size scroll

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Hello. Well, I'm new to the community so I'm sorry if something I write is not very clear. I would like to know how do I give a scroll of browser screen size, I want to divide the site into three, type an "anchor" effect only with scroll of the mouse.

Thank you in advance.

javascript jquery rolamento

asked by anonymous 02.03.2016 / 04:49

2 answers

How to make instagram-style urls How to create menu tree (multilevel) with PHP + MySQL?

score 0 · Answer 1

I have developed an example, just below, that basically does what you said in the comments of your doubt. I created a scroll event listener that checks the ranges, which are the offsetTop of sections of the page, to know in which section function scrollTo should position scroll .

// Object usado para regra
var oScroll = {
  y: 0,
  sec1: document.getElementById('sec1').offsetTop,
  sec2: document.getElementById('sec2').offsetTop,
  sec3: document.getElementById('sec3').offsetTop,
  prevent: true
}

window.addEventListener('scroll', function(e) {
  if(this.scrollY < oScroll.y) {
  // subindo
    if(this.scrollY > oScroll.sec1 && this.scrollY < oScroll.sec2) {
    	this.scrollTo(0, oScroll.sec1);
    } else if(this.scrollY > oScroll.sec2 && this.scrollY < oScroll.sec3) {
    	this.scrollTo(0, oScroll.sec2);
    } else if(this.scrollY > oScroll.sec3) {
    	this.scrollTo(0, oScroll.sec3);
    }
  } else if(this.scrollY > oScroll.y) {
  // descendo
    if(this.scrollY > oScroll.sec1 && this.scrollY < oScroll.sec2 && oScroll.prevent) {
    	this.scrollTo(0, oScroll.sec2);
    } else if(this.scrollY > oScroll.sec2 && this.scrollY < oScroll.sec3) {
    	this.scrollTo(0, oScroll.sec3);
    }
  }
  oScroll.y = this.scrollY;
});

body::-webkit-scrollbar {
  display: none;
}
.main {
  height: 1500px;
  margin: 100px 0;
}
.section {
  background: lightblue;
  height: 500px;
  margin: 10px 0;
}

<div class="main">
  <div class="section" id="sec1">
    <h1>
      Section 1
    </h1>
  </div>
  <div class="section" id="sec2">
    <h1>
      Section 2
    </h1>
  </div>
  <div class="section" id="sec3">
    <h1>
      Section 3
    </h1>
  </div>
</div>

See the example in JSFiddle if you prefer.

score 0 · Answer 2

follows an option using CSS , specifically transition and transform .

var container = document.querySelector(".container");
var contents = document.querySelectorAll(".content");

var containerHeight = 100 * contents.length;
var contentHeight = 100 / contents.length;
var contentAtual = 1;
var atualizarContent = function (incremento) {
  contentAtual += incremento;
  deslocamento = (contentAtual - 1) * contentHeight;
  container.style.transform = "translate3d(0px, -" + deslocamento  + "%, 0px)";
}

container.style.height = containerHeight + "%";
[].forEach.call(contents, function (content, indice) {
  content.style.height = contentHeight + "%";
});

atualizarContent(0);
container.addEventListener("wheel", function (event) {
  if (event.deltaY > 0) { 
    if (contentAtual < contents.length) {
      atualizarContent(1);
    }
  } else {
    if (contentAtual > 1) {
      atualizarContent(-1);
    }
  }
});

/* transform: translate3d(0px, -100%, 0px); */

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;  
  overflow: hidden;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 1s ease;
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
}

#content1 {
  background-color: crimson;
}

#content2 {
  background-color: teal;
}

#content3 {
  background-color: steelblue;
}

#content4 {
  background-color: darkorange;
}

<div class="container">
  <div id="content1" class="content"></div>
  <div id="content2" class="content"></div>
  <div id="content3" class="content"></div>
  <div id="content4" class="content"></div>
</div>