如何在 window.innerheight 中滚动 50% 的视口高度

Question

这就是我的完整 js 代码：

//init hammer function
var element=document.getElementById('pinwall-grid');
var hammertime=Hammer(element).on("drag", function(event) {
  direction=event.gesture.direction;
  if(direction == 'left')
  {
    var $meN=$('.pinwall-grid .ctrl a.next');

    if(!$meN.hasClass("nextD"))
    {
      $meN.trigger('click');
    }

    console.log('left');
  }
  else if(direction == 'right')
  {
    var $meP=$('.pinwall-grid .ctrl a.prev');

    if(!$meP.hasClass("prevD"))
    {
      $meP.trigger('click');
    }

    console.log('right');
  }
  else if(direction == 'up')
  {
    window.scroll({
      top: (window.innerHeight/2),
      left: 0,
      behavior: 'smooth'
    });

    console.log('down')
  }
  else if(direction == 'down')
  {
    window.scroll({
      top: (window.innerHeight/ -2),
      left: 0,
      behavior: 'smooth'
    });

    console.log('up')
  }

  event.gesture.stopDetect();
});

这里的问题是，当您向上或向下滑动时，它只会滚动 1 次，但是当我添加一个静态值（如 -300 而不是 ( window.innerHeight / -2 ) 时，它会完美运行。

知道我可以用什么代替 ( window.innerHeight / 2 ) 每次向上或向下滑动时滚动 50vh。

注意：我添加了 console.log 来检查每次向下或向上滑动时它是否读取代码，它是。

我猜这是一个测量问题。

查看 http://86.62.248.112/en/（手机上的最新消息滑块）以了解我在说什么

Answer 1

window.scroll 将文档滚动到指定位置。一旦到达那里，重复相同的滚动请求应该没有效果。

window.scrollBy 按指定量滚动。结束位置相对于开始位置，重复调用应该继续滚动（如果文档足够大）。

我假设 "add a static value to the scroll position" 在对 window.scroll 的调用中使用意味着您更新了滚动到的位置 - 结果文档滚动了添加的量。

尝试使用 window.scrollBy。

如何在 window.innerheight 中滚动 50% 的视口高度

how to scroll 50% of viewport height in window.innerheight

javascript

hammer.js