W3Schools Tryit Editor

<!doctype html>
<html>

<body>
<h3>CSS scroll-padding property.</h3>
<p>Drag the scrollbar vertically inside the photo gallery box, let go, and see the scroll-snap effect with snap position start and scroll-padding 30px. The effect of the scroll-padding property value is that the images are offset below the fixed top element.</p>
<div id="container">
 <div id="topDiv">Fixed top element</div>
 <div id="imgDiv">
 [<a href="/index.cgi/larger-text/http://www.w3schools.com/cssref/img_chania.jpg">画像:alley</a>]
 [<a href="/index.cgi/larger-text/http://www.w3schools.com/cssref/img_forest_narrow.jpg">画像:bridge in jungle</a>]
 [<a href="/index.cgi/larger-text/http://www.w3schools.com/cssref/img_mountains.jpg">画像:mountains</a>]
 [<a href="/index.cgi/larger-text/http://www.w3schools.com/cssref/img_man_narrow.jpg">画像:man with camera</a>]
 [<a href="/index.cgi/larger-text/http://www.w3schools.com/cssref/img_5terre.jpg">画像:Cinque Terre</a>]
 </div>
</div>
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="http://www.w3schools.com/cssref/tryit.php?filename=trycss_scroll-padding_with_images">(->オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="http://www.w3schools.com/cssref/tryit.php?filename=trycss_scroll-padding_with_images" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>		
</body>
</html>