title: how to scroll 50% of viewport height in window.innerheight
body: <p>thats my full js code:</p>
  
  <pre><code>//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();
  });
  </code></pre>
  
  <p>The issue here is that when you swipe up or down, it scrolls only 1 time but when i add a static value like -300 instead of <code>( window.innerHeight / -2 )</code>, it works perfectly.</p>
  
  <p>Any Idea what can i use instead of <code>( window.innerHeight / 2 )</code> to scroll 50vh every time you swipe up or down.</p>
  
  <p>Note: I added the console.log to check if its reading the code every time you swipe down or up, and it is.</p>
  
  <p>I guess its a measurement issue. </p>
  
  <p>Check <a href="http://86.62.248.112/en/" rel="nofollow noreferrer">http://86.62.248.112/en/</a> (the Latest news Slider on mobile) to see what i'm talking about</p>