<html>
<head>
<style>
div {
margin: 5px 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
border: 2px solid black;
}
#main-box {
display: flex;
flex-wrap: wrap;
background-color: darkcyan;
height: 800px;
}
#box-1 {
background-color: pink;
}
#box-2 {
background-color: aliceblue;
overscroll-behavior: contain;
}
#main-box > div {
flex: 1;
height: 150px;
}
</style>
</head>
<body>
<h1>overscroll-behavior Property</h1>
<p>The two boxes displayed below has overscroll-behavior set as auto and contain, respectively.</p>
<p>Scroll the first pink box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>
<p>Scroll the second white box using the mouse and once it is scrolled completely keep scrolling and see the parent element not getting scrolled.</p>
<div id="main-box">
<div id="box-1">
<h3>overscroll-behavior: auto</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p>
</div>
<div id="box-2">
<h3>overscroll-behavior: contain</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
</p>
</div>
</div>
</body>
</html>
Try our Online Html Editor (Version HTML-5) Write and Edit, Run, and Share your Html Code online directly from your browser. This Online Compiler provides you the comfort to edit and compile your Html code using latest version HTML-5
How to use our Online Html Editor?
Write and Execute Code
- Write your program (or, paste it) directly under the "Source Code" tab.
- If you want to save your program, go to the "Project" menu and save it.
- You can directly execute your program without saving it and just by clicking on "Execute" button.
How to Enter User Input?
The latest version of our Online Html Editor allows to provide program input at run time from the terminal window exactly the same way as you run your program at your own computer. So simply run a program and provide your program input (if any) from the terminal window available in the right side.
Keyboard Shortcuts
The following are the keyword shortcut of our editor:
| Shortcut | Description |
|---|---|
| ⌘ + Enter | Run the program |
| ⌘ + G | Share Project |
| ⌘ + Z | Undo Editing |
| ⌘ + Y | Redo Editing |
| ⌘ + A | Select All Text |
| ⌘ + X | Cut Selected Text |
| ⌘ + C | Copy Selected Text |
| ⌘ + V | Paste Copied Text |
| ⌘ + F | Search Text |
| ⌘ + ⌥ + F | Replace Text |
| Shortcut | Description |
|---|---|
| Ctrl + Enter | Run the program |
| Ctrl + G | Share Project |
| Ctrl + Z | Undo Editing |
| Ctrl + Y | Redo Editing |
| Ctrl + A | Select All Text |
| Ctrl + X | Cut Selected Text |
| Ctrl + C | Copy Selected Text |
| Ctrl + V | Paste Copied Text |
| Ctrl + F | Search Text |
| Ctrl + H | Replace Text |
Share Your Html Project Online
You can use this feature to share your Html Code with your teachers, classmates and colleagues. Just click Share Button and it will create a short link, which can be shared through Email, WhatsApp or even through Social Media. A shared link will be deleted if it has been passive for almost 3 months.
More Features of the Editor
- Theme – You can change the current editor's theme from the "Editor Theme" option under "Settings" menu.
- Font Size – You can change the font size of the editor/compiler from the "Font Size" option under "Settings" menu.
- Tab Size – You can change the tab size from the "Tab Size" option under "Settings" Menu.
- Show/Hide Line Numbers – You can show/hide the line number with the code from the "Show Line Numbers" or "Hide Line Numbers" option under "Settings" Menu.
- And, many more.