使用纯 javascript 滚动整页
[英]Full page scrolling with plain javascript
问题描述
当鼠标滚轮和/或箭头键事件被触发时，我正在尝试使用普通的 javascript 实现自动整页（垂直）滚动。
我做了这个片段，它在 Jsfiddle 上工作，但是，当我在我的 PC 上尝试相同的代码时，使用 Chrome（隐身模式）预览它在使用鼠标滚轮时不起作用（但如果使用箭头键则起作用）。 编辑：在 Firefox 或 IE11 上预览有效...
我也想隐藏滚动条。 如果我使用overflow: hidden; 在body上滚动条消失但滚动效果停止工作。 在我的 PC 上，它甚至不隐藏滚动条。
任何人都可以帮忙吗？
HTML：
<section class="red">FIRST</section>
<section class="green">SECOND</section>
<section class="blue">THIRD</section>
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：
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;
});
2 个解决方案
解决方案1
2 2018-01-02 22:14:31
要隐藏滚动条，您可以在 CSS 中使用以下代码：
::-webkit-scrollbar {
display: none;
}
对我来说，您的 JS 代码适用于 Chrome。
解决方案2
1 2020-10-11 16:01:02
我在 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">↑</span></div> <div class="panel">three <span class="top">↑</span></div> <div class="panel">four <span class="top">↑</span></div> <div class="panel">five <span class="top">↑</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>
它运作良好
使用简单的JavaScript选择父元素并自动滚动到最后一个元素
[英]Selecting parent element with plain JavaScript and auto-scrolling to the last element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.