Jermolene · April 15, 2022 13:14
diff --git a/test-scrolling.html b/test-scrolling.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Scrolling Test</title>
 <script>

 </script>
 </head>
 <body>

 <div style="background:red;height:100px;overflow:scroll;">
 	<div style="background:grey;height:100px;overflow:scroll;">
 	
 	</div>	
 	<div style="background:green;height:100px;overflow:scroll;">

 		This is some content.<br>
 		<svg>
 			<rect width="100" height="700" style="fill:red;stroke:black;stroke-width:1;"></rect>
 		</svg>

 		<div id="target">
 			Scroll to here!
 		</div>

 	</div>	
 	<div style="background:grey;height:100px;overflow:scroll;">
 	
 	</div>	
 </div>

 Clicking this button will scroll two containers to get to the target: 

 <button onclick="document.querySelectorAll('#target')[0].scrollIntoView({behavior: 'smooth'});">
 	Scroll to the target
 </button>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Scrolling Test</title>
	<script>

	</script>
	</head>
	<body>

	<div style="background:red;height:100px;overflow:scroll;">
	<div style="background:grey;height:100px;overflow:scroll;">

	</div>
	<div style="background:green;height:100px;overflow:scroll;">

	This is some content.<br>
	<svg>
	<rect width="100" height="700" style="fill:red;stroke:black;stroke-width:1;"></rect>
	</svg>

	<div id="target">
	Scroll to here!
	</div>

	</div>
	<div style="background:grey;height:100px;overflow:scroll;">

	</div>
	</div>

	Clicking this button will scroll two containers to get to the target:

	<button onclick="document.querySelectorAll('#target')[0].scrollIntoView({behavior: 'smooth'});">
	Scroll to the target
	</button>

	</body>
	</html>