使用纯 JavaScript 滚动整页答案

【问题标题】：Full page scrolling with plain javascript使用纯 JavaScript 滚动整页
【发布时间】：2018-01-02 22:05:40
【问题描述】：

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

我这样做了snippet，它适用于 Jsfiddle，但是，当我在我的 PC 上尝试相同的代码时，使用 Chrome 预览它（隐身模式）在使用鼠标滚轮时不起作用（但在使用箭头键时有效）。 编辑： 在 Firefox 或 IE11 上预览可以工作...

我也想隐藏滚动条。如果我在body 上使用overflow: hidden;，滚动条会消失，但滚动效果会停止工作。在我的电脑上，它甚至不隐藏滚动条。

有人可以帮忙吗？

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

【问题讨论】：

标签： javascript events scroll

【解决方案1】：

要隐藏滚动条，您可以在 CSS 中使用以下代码：

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

对我来说，您的 JS 代码可以在 Chrome 中运行。

【讨论】：

刚刚测试了自己，可以确认。行为的小提琴：jsfiddle.net/7L84gkvp/1
对于 IE 和 Chrome：body {-ms-overflow-style: none; // IE 10+} body::-webkit-scrollbar {display: none; // Safari and Chrome}。但在 FF 中不起作用。您使用的是哪个版本的 Chrome？

【解决方案2】：

我在 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>

效果很好

【讨论】：

非常感谢，没关系，但是当页面高度超过 100vh 时无法正常工作。