使用纯javascript进行全页滚动

我尝试在触发鼠标滚轮和/或箭头键事件时，使用纯javascript实现自动全页（垂直）滚动

我这样做了，它可以在JSFIDLE上运行，但是，当我在PC上尝试相同的代码时，使用Chrome预览它（隐姓埋名模式）在使用鼠标滚轮时不起作用（但如果使用箭头键则有效）编辑：在Firefox或IE11上预览作品

我还想隐藏滚动条。如果我使用

溢出：隐藏在
body
上，滚动条消失，但滚动效果停止工作。在我的电脑上，它甚至不隐藏滚动条

有人能帮忙吗

HTML:

JS:

让lastcoll=0；
addEventListener（'scroll'，function（）{
//向下滚动
如果（lastScrollwindow.pageYOffset）{
scrollBy（0，window.innerHeight*-1）；
}
lastScroll=window.pageYOffset；
});
要隐藏滚动条，可以在CSS中使用以下代码：

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

对我来说，你的JS代码在Chrome上运行。
我在codepen.io上找到了代码



一
两个&uarr；
三个&uarr；
四个&uarr；
五年&uarr；
身体{
溢出：隐藏；
保证金：0；
字体系列：“聚光灯”，无衬线；
文本呈现：优化易读性；
}
.嗯{
位置：相对位置；
溢出：隐藏；
-webkit转换：1s立方贝塞尔（0.5,0.5,1）；
过渡：1s三次贝塞尔（0.5,0,0.5,1）；
}
.顶{
字号：80%；
颜色：hsla（0,0%，100%，0.25）；
位置：相对位置；
顶部：-.2米；
光标：指针；
}
.小组{
位置：相对位置；
高度：100vh；
溢出：隐藏；
字体大小：10vmin；
填充：1em；
框大小：边框框；
颜色：hsla（0,0%，100%，.1）；
游标：默认值；
}
.专家组：第n个孩子（1）{
背景：#012345；
}
.专家组：第n个孩子（2）{
背景：#123456；
}
.专家组：第n个孩子（3）{
背景#234567；
}
.专家组：第n个孩子（4）{
背景#345678；
}
.专家组：第n个孩子（5）{
背景#456789；
}
（功能（）{
“严格使用”；
/*[平移和旋转CSS卷轴]*/
var pnls=document.queryselectoral（'.panel'）.length，
scdir，hold=false；
函数_滚动（obj）{
变长、正压、平移、步长=100，
vh=窗内高度/100，
vmin=Math.min（window.innerHeight，window.innerWidth）/100；
if（（this！==未定义和&this.id=='well'）| |（obj！==未定义和&obj.id=='well'））{
pan=这个| | obj；
正压=parseInt（全天离视/vh）；
}
如果（pan==未定义）{
返回；
}
正压=正压| | parseInt（平移偏视/vmin）；
slength=parseInt（pan.style.transform.replace（'translateY（'，''））；
如果（scdir=='up'和&Math.abs（长度）<（增压-增压/pnls））{
slength=slength-步长；
}else if（scdir==='down'&&slength<0）{
slength=slength+步长；
}else if（scdir==='top'）{
长度=0；
}
如果（保持===false）{
保持=正确；
pan.style.transform='translateY（'+slength+'vh'）；
setTimeout（函数（）{
保持=假；
}, 1000);
}
log（scdir+'：'+slength+'：'+plength+'：'+（plength-plength/pnls））；
}
/*[触摸屏设备上的滑动检测]*/
功能_滑动（obj）{
var swdir，
sX，
sY，
dX，
嗯,，
阈值=100，
/*[被视为刷卡的最小行驶距离]*/
松弛=50，
/*[垂直方向上同时允许的最大距离]*/
alT=500，
/*[允许行驶该距离的最长时间]*/
elT，/*[经过的时间]*/
stT；/*[开始时间]*/
obj.addEventListener（'touchstart'，函数（e）{
var tchs=e.changedtouchs[0]；
swdir=‘无’；
sX=tchs.pageX；
sY=tchs.pageY；
stT=新日期（）.getTime（）；
//e、 预防默认值（）；
}，假）；
obj.addEventListener（'touchmove'，函数（e）{
e、 preventDefault（）；/*[在DIV内时防止滚动]*/
}，假）；
对象加法器Listener（'touchend'，函数（e）{
var tchs=e.changedtouchs[0]；
dX=tchs.pageX-sX；
dY=tchs.pageY-sY；
elT=新日期（）.getTime（）-stT；
if（elT=threshold&Math.abs（dY）=threshold&Math.abs（dX）0）{
scdir=‘向上’；
}
e、 停止传播（）；
});
嗯，addEventListener（'wheel'，u scrollY）；
_刷（井）；
var tops=document.querySelectorAll（'.top'）；
对于（变量i=0；i
刚刚测试了我自己，并且可以确认。行为混乱：对于IE和Chrome:
body{-ms overflow style:none；//IE 10+}body:：-webkit scrollbar{display:none；//Safari和Chrome}
。但是在FF中不起作用。您使用的是什么版本的Chrome？
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;
}

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

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