LayoutTests/css3/scroll-snap/scroll-snap-programmatic-overflow-scroll.html - WebKit - Git at Google

 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
     html, body {
         overflow: hidden;
         padding: 0;
         margin: 0;
     }

     #container {
         width: 100%;
         height: 400px;
         overflow-y: auto;
         position: absolute;
         -webkit-overflow-scrolling: touch;
         scroll-snap-type: y mandatory;
     }

     .child {
         width: 100%;
         height: 100%;
         scroll-snap-align: start;
     }

     #fixed {
         position: fixed;
         top: 0;
         right: 0;
         width: 1em;
         height: 1em;
         background-color: white;
     }

     #output {
         margin-top: 400px;
     }
     </style>
 </head>
 <div id="container">
     <div class="child" style="background-color: red"></div>
     <div class="child" style="background-color: green"></div>
     <div class="child" style="background-color: blue"></div>
 </div>
 <div id="fixed"></div>
 <script>
 if (window.testRunner)
     testRunner.dumpAsText();

 container.scrollTop = 400;
 fixed.remove();
 document.write(`container.scrollTop is now: ${container.scrollTop}`);
 </script>
 </html>
	<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	html, body {
	overflow: hidden;
	padding: 0;
	margin: 0;
	}

	#container {
	width: 100%;
	height: 400px;
	overflow-y: auto;
	position: absolute;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: y mandatory;
	}

	.child {
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	}

	#fixed {
	position: fixed;
	top: 0;
	right: 0;
	width: 1em;
	height: 1em;
	background-color: white;
	}

	#output {
	margin-top: 400px;
	}
	</style>
	</head>
	<div id="container">
	<div class="child" style="background-color: red"></div>
	<div class="child" style="background-color: green"></div>
	<div class="child" style="background-color: blue"></div>
	</div>
	<div id="fixed"></div>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

	container.scrollTop = 400;
	fixed.remove();
	document.write(`container.scrollTop is now: ${container.scrollTop}`);
	</script>
	</html>