javascript - 使用固定数量的像素滚动页面并通过滚轮进行滚动

Question

我有一个元素列表，我想使用滚轮从一个元素移动到另一个元素，但问题是我无法使鼠标滚轮以固定数量的像素滚动页面。我正在尝试在 Angular2 中执行此操作，但纯 JavaScript 解决方案也会有所帮助。我的代码如下所示:

@HostListener('window:scroll', ['$event'])
  onWindowScroll(e) {
    e.preventDefault();
    const st = window.pageYOffset;
    if (st > this.lastScrollTop) {
        this.goToNext();
    } else {
        this.goToPrevious();
    }
    this.lastScrollTop = st;
  }

goToNext = () => {
    window.scrollBy(0, 210);
}

goToPrevious = () => {
    window.scrollBy(0, -210);
}

此实现的问题在于，每次滚动页面时，都会多次调用 goToNext() 和 goToPrevious() 函数。因此，我尝试阻止默认的滚动事件，然后使用 window.scrollBy(x, y) 滚动(使用固定数量的像素)页面。我能够使用 goToNext() 和 goToPrevious() 从一项导航到另一项，并使用键盘上的向上和向下箭头，购买我需要使其成为可能也使用鼠标滚轮。谢谢!

更新:更具体地说:当我从鼠标滚轮向下滚动时，我希望页面滚动精确数量的像素(目前为 210)。因此，即使我滚动得更用力，或者正常滚动，或者以任何其他方式滚动，我也需要页面以相同数量的像素滚动。然后，在另一个滚动中，页面应再次滚动 210 像素。这个想法是让项目始终位于页面上的同一位置。此时，当我滚动时，会发生许多滚动事件，因此我的滚动函数 goToNext() 和 goToPrevious() 被多次调用(每个滚动事件一次) )并且页面基本上滚动到底部。

我正在尝试复制他们在这里的行为:

https://admin.typeform.com

当您从模板(注册表单)创建新表单时。他们没有完全达到我想要实现的目标，但我正在尝试这种“滚动”技巧，以避免同时有 2 个项目处于非事件状态。

Answer 1

这就是我要做的，

我将向 keydown 和 mousewheel 事件附加一个监听器，然后从那里停止默认滚动调用 preventDefault。然后根据事件指向的方向调用函数 scrollDown 或 scrollUp。

您可以将 e.deltaY 用于 onwheel，将 e.key 用于 onkeydown。

下面是一个示例片段。当然，添加平滑的滚动效果是您的任务。

window.onwheel = beforeScroll;
window.onkeydown = beforeScroll;
var scrollVal = 0;
function beforeScroll(e) {
    if (e.type == 'wheel') {
        if (e.deltaY < 0) {
            scrollUp();
        } else {
            scrollDown();
        }
    }
    else if (e.type == 'keydown' && (e.key == 'ArrowDown' || e.key == 'ArrowUp')) {
        if (e.key == 'ArrowDown')
            scrollDown();
        else if (e.key == 'ArrowUp')
            scrollUp();
    }

    e.preventDefault();
    return;
}

function scrollUp() {
    if (scrollVal > 0)
        scrollVal -= 200;

    this.scroll(0, scrollVal);
}

function scrollDown() {
    if (scrollVal < document.body.scrollHeight)
        scrollVal += 200;
    //should detect for maximum scroll
    this.scroll(0, scrollVal);
}

.demo {
  width: 100%;
}

.demo .content:nth-child(odd) {
  background-color: grey;
}

.content {
  width: 100%;
  height: 200px;
  background-color: white;
  border: solid 1px black;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="demo">
  <div class="content"><h1>1</h1></div>
  <div class="content"><h1>2</h1></div>
  <div class="content"><h1>3</h1></div>
  <div class="content"><h1>4</h1></div>
  <div class="content"><h1>5</h1></div>
  <div class="content"><h1>6</h1></div>
  <div class="content"><h1>7</h1></div>
  <div class="content"><h1>8</h1></div>
  <div class="content"><h1>9</h1></div>
</div>