Scroll of window size

Asked

Viewed 283 times

1

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

Thank you so much.

javascript jquery rolling

  • It wasn’t clear to me what you want. You can make an image?

  • So instead of the user scrolling the page gradually as is normal,

  • @Afonsojorge Using a function that detects the "scrolling" action you can check if the height is in a range and this has a certain point on the page to which will be set the scroll.

  • <br> http://alvarotrigo.com/fullPage/<br> You can try using this plugin! <br>Would that be it? <br> Remembering that your site will have to adapt in smaller resolutions

2 answers

0

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>

0

I developed an example, just below, that basically does what I said in the comments of your doubt. I created a Istener of the scroll event which checks on ranges, which are the offsetTop of sections page, to find out on which section the function scrollTo should position the 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 on Jsfiddle if you prefer.

Browser other questions tagged javascript jquery rolling

You are not signed in. Login or sign up in order to post.