mirror of
https://github.com/web-infra-dev/midscene.git
synced 2025-07-08 09:31:58 +00:00
36 lines
1.5 KiB
HTML
36 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Scroll Page Demo</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Vertical Scroll</h1>
|
|
<div style="width: 300px; height: 300px; background-color: #ccc; overflow-y: scroll;">
|
|
<div style="width: 100px; height: 100px; background-color: #aaa;">Vertical 1</div>
|
|
<div style="width: 100px; height: 100px; background-color: #bbb;">Vertical 2</div>
|
|
<div style="width: 100px; height: 100px; background-color: #ccc;">Vertical 3</div>
|
|
<div style="width: 100px; height: 100px; background-color: #ddd;">Vertical 4</div>
|
|
<div style="width: 100px; height: 100px; background-color: #eee;">Vertical 5</div>
|
|
</div>
|
|
|
|
<h1>Horizontal Scroll</h1>
|
|
<div style="width: 300px; height: 100px; background-color: #ccc; overflow-x: scroll; white-space: nowrap;">
|
|
<div style="width: 100px; height: 100px; background-color: #aaa; display: inline-block;">Horizontal 1</div>
|
|
<div style="width: 100px; height: 100px; background-color: #bbb; display: inline-block;">Horizontal 2</div>
|
|
<div style="width: 100px; height: 100px; background-color: #ccc; display: inline-block;">Horizontal 3</div>
|
|
<div style="width: 100px; height: 100px; background-color: #ddd; display: inline-block;">Horizontal 4</div>
|
|
<div style="width: 100px; height: 100px; background-color: #eee; display: inline-block;">Horizontal 5</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |