使用纯 javascript 滚动整页

Question

I'm trying to implement an automatic full page (vertical) scroll when a mouse wheel and/or arrow keys event is triggered, using plain javascript.当鼠标滚轮和/或箭头键事件被触发时，我正在尝试使用普通的 javascript 实现自动整页（垂直）滚动。

I did this snippet and it works on Jsfiddle but, when I try the same code on my PC previewing it with Chrome (Incognito Mode) is not working while using mouse scroll wheel (but works if using arrow key).我做了这个片段，它在 Jsfiddle 上工作，但是，当我在我的 PC 上尝试相同的代码时，使用 Chrome（隐身模式）预览它在使用鼠标滚轮时不起作用（但如果使用箭头键则起作用）。 Edit: Preview on Firefox or IE11 works...编辑：在 Firefox 或 IE11 上预览有效...

I also want to hide the scrollbar.我也想隐藏滚动条。 If I use overflow: hidden;如果我使用overflow: hidden; on body the scrollbar disappear but scrolling effect stop working.在body上滚动条消失但滚动效果停止工作。 On my PC it don't even hide the scrollbar.在我的 PC 上，它甚至不隐藏滚动条。

Anyone can help?任何人都可以帮忙吗？

HTML: HTML：

<section class="red">FIRST</section>
<section class="green">SECOND</section>
<section class="blue">THIRD</section>

CSS: CSS：

body, body * {
  margin: 0;
  padding: 0;
  color: lightgrey;
  font-size: 40px;
}

section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
 background-color: blue;
}

JS: JS：

let lastScroll = 0;

window.addEventListener('scroll', function() {
  // scroll down
  if (lastScroll < window.pageYOffset) {
    window.scrollBy(0, window.innerHeight);
  }
  // scroll up
  else if (lastScroll > window.pageYOffset) {
    window.scrollBy(0, window.innerHeight * -1);
  }
  lastScroll = window.pageYOffset;
});

Answer 1

To hide the scroll bar you can use this code in the CSS:要隐藏滚动条，您可以在 CSS 中使用以下代码：

::-webkit-scrollbar {
display: none;
}

For me, your JS code works in Chrome.对我来说，您的 JS 代码适用于 Chrome。

Answer 2

i found the code on codepen.io https://codepen.io/nearee/pen/zYYENMa我在 codepen.io https://codepen.io/nearee/pen/zYYENMa上找到了代码

 <body translate="no" > <div class="well" id="well"> <div class="panel">one</div> <div class="panel">two <span class="top">&uarr;</span></div> <div class="panel">three <span class="top">&uarr;</span></div> <div class="panel">four <span class="top">&uarr;</span></div> <div class="panel">five <span class="top">&uarr;</span></div> </div> </body> <style> body { overflow: hidden; margin: 0; font-family: "Limelight", sans-serif; text-rendering: optimizeLegibility; } .well { position: relative; overflow: hidden; -webkit-transition: 1s cubic-bezier(0.5, 0, 0.5, 1); transition: 1s cubic-bezier(0.5, 0, 0.5, 1); } .top { font-size: 80%; color: hsla(0, 0%, 100%, .25); position: relative; top: -.2em; cursor: pointer; } .panel { position: relative; height: 100vh; overflow: hidden; font-size: 10vmin; padding: 1em; box-sizing: border-box; color: hsla(0, 0%, 100%, .1); cursor: default; } .panel:nth-child(1) { background: #012345; } .panel:nth-child(2) { background: #123456; } .panel:nth-child(3) { background: #234567; } .panel:nth-child(4) { background: #345678; } .panel:nth-child(5) { background: #456789; } </style> <script> (function() { "use strict"; /*[pan and well CSS scrolls]*/ var pnls = document.querySelectorAll('.panel').length, scdir, hold = false; function _scrollY(obj) { var slength, plength, pan, step = 100, vh = window.innerHeight / 100, vmin = Math.min(window.innerHeight, window.innerWidth) / 100; if ((this !== undefined && this.id === 'well') || (obj !== undefined && obj.id === 'well')) { pan = this || obj; plength = parseInt(pan.offsetHeight / vh); } if (pan === undefined) { return; } plength = plength || parseInt(pan.offsetHeight / vmin); slength = parseInt(pan.style.transform.replace('translateY(', '')); if (scdir === 'up' && Math.abs(slength) < (plength - plength / pnls)) { slength = slength - step; } else if (scdir === 'down' && slength < 0) { slength = slength + step; } else if (scdir === 'top') { slength = 0; } if (hold === false) { hold = true; pan.style.transform = 'translateY(' + slength + 'vh)'; setTimeout(function() { hold = false; }, 1000); } console.log(scdir + ':' + slength + ':' + plength + ':' + (plength - plength / pnls)); } /*[swipe detection on touchscreen devices]*/ function _swipe(obj) { var swdir, sX, sY, dX, dY, threshold = 100, /*[min distance traveled to be considered swipe]*/ slack = 50, /*[max distance allowed at the same time in perpendicular direction]*/ alT = 500, /*[max time allowed to travel that distance]*/ elT, /*[elapsed time]*/ stT; /*[start time]*/ obj.addEventListener('touchstart', function(e) { var tchs = e.changedTouches[0]; swdir = 'none'; sX = tchs.pageX; sY = tchs.pageY; stT = new Date().getTime(); //e.preventDefault(); }, false); obj.addEventListener('touchmove', function(e) { e.preventDefault(); /*[prevent scrolling when inside DIV]*/ }, false); obj.addEventListener('touchend', function(e) { var tchs = e.changedTouches[0]; dX = tchs.pageX - sX; dY = tchs.pageY - sY; elT = new Date().getTime() - stT; if (elT <= alT) { if (Math.abs(dX) >= threshold && Math.abs(dY) <= slack) { swdir = (dX < 0) ? 'left' : 'right'; } else if (Math.abs(dY) >= threshold && Math.abs(dX) <= slack) { swdir = (dY < 0) ? 'up' : 'down'; } if (obj.id === 'well') { if (swdir === 'up') { scdir = swdir; _scrollY(obj); } else if (swdir === 'down' && obj.style.transform !== 'translateY(0)') { scdir = swdir; _scrollY(obj); } e.stopPropagation(); } } }, false); } /*[assignments]*/ var well = document.getElementById('well'); well.style.transform = 'translateY(0)'; well.addEventListener('wheel', function(e) { if (e.deltaY < 0) { scdir = 'down'; } if (e.deltaY > 0) { scdir = 'up'; } e.stopPropagation(); }); well.addEventListener('wheel', _scrollY); _swipe(well); var tops = document.querySelectorAll('.top'); for (var i = 0; i < tops.length; i++) { tops[i].addEventListener('click', function() { scdir = 'top'; _scrollY(well); }); } })(); </script>

it works well它运作良好

使用纯 javascript 滚动整页

问题描述

2 个解决方案

解决方案1
2 2018-01-02 22:14:31

解决方案2
1 2020-10-11 16:01:02

使用纯 javascript 滚动整页

问题描述

2 个解决方案

解决方案1 2 2018-01-02 22:14:31

解决方案2 1 2020-10-11 16:01:02

解决方案1
2 2018-01-02 22:14:31

解决方案2
1 2020-10-11 16:01:02