Skip to content

Instantly share code, notes, and snippets.

@huycozy
Last active January 16, 2025 04:34
Show Gist options
  • Save huycozy/afe89633ffea11b6851735da7e4fa22c to your computer and use it in GitHub Desktop.
Save huycozy/afe89633ffea11b6851735da7e4fa22c to your computer and use it in GitHub Desktop.
HTML page which is scrollable with 50 items ( using for comparing with Flutter web scrolling, scroll to top on iOS, etc...)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable List</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
        }

        .item {
            padding: 15px;
            margin: 10px 0;
            background-color: #f5f5f5;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        .item:hover {
            background-color: #e9e9e9;
            transition: background-color 0.2s;
        }
    </style>
</head>

<body>
    <div class="container">
        <script>
            for(let i = 1; i <= 50; i++) {
                document.write(`<div class="item">Item ${i}</div>`);
            }
        </script>
    </div>
</body>

</html>

Host it with python:python3 -m http.server 8080

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment