title: Scroll snap css property with overflow y is causing page scroll
body: <p>I'm using the css property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type" rel="noreferrer">scroll-snap-type</a> to have contents of an overflowing div snap to place on scroll. </p>
  
  <p>It's easily applied: </p>
  
  <pre><code>.container {
    height: 400px;
    overflow-y: scroll;
    scroll-snap-type: mandatory;
  }
  
  .contents {
    scroll-snap-align: start;
  }
  </code></pre>
  
  <p>Have a look at this page in <strong>Safari 11+ on desktop</strong> for an example - <a href="https://codepen.io/fionnbharra/full/PQZmav/" rel="noreferrer">https://codepen.io/fionnbharra/full/PQZmav/</a> 
  Scroll over the div on the left hand side of the page. Notice how the when scrolling finishes the div aligns to the top of the container. This is behaving as expected. </p>
  
  <p>My problem is that it breaks when we have a long page - <a href="https://codepen.io/fionnbharra/full/oEbWeq/" rel="noreferrer">https://codepen.io/fionnbharra/full/oEbWeq/</a> </p>
  
  <p>Try scrolling over the same overflow div. Notice how the page body scrolls at the at the same time, meaning it's very difficult to see the original content scroll.</p>
  
  <p>Is this a bug? Am I doing something wrong?</p>