This is a simple scroll boundary behavior demo that shows how the property impact scroll propagation and overscroll afforfances.
Just try scrolling each scroller and observe propagation of scroll to document viewport.
Last active
September 6, 2017 18:19
-
-
Save majido/3ce4788bf80da4902f7ce73fc1fcfa29 to your computer and use it in GitHub Desktop.
scroll boundary behavior demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| border: yes | |
| height: 600 | |
| scrolling: yes | |
| license: mit | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Simple demo page for scroll-boundary-behavior</title> | |
| </head> | |
| <style> | |
| html { | |
| overflow: scroll; | |
| font-size: 36px; | |
| } | |
| container { | |
| position: fixed; | |
| top: 200px; | |
| height: 50%; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .scroller { | |
| overflow: scroll; | |
| margin: 1% | |
| } | |
| .scroller > div { | |
| text-wrap: break-word; | |
| width: 3000px; | |
| height: 3000px; | |
| background: linear-gradient(to bottom right, white, blue); | |
| } | |
| .filler { | |
| width: 5000px; | |
| height: 5000px; | |
| background: linear-gradient(to bottom right, white, green); | |
| } | |
| </style> | |
| <div class="filler"> | |
| Scroll document and then scroll any of the fixed position scroller. | |
| <br> Depending on scroll-boundary-behavior, the scroll propagates to | |
| document or not. | |
| </div> | |
| <container> | |
| <div class="scroller" style="scroll-boundary-behavior: none;"> | |
| <div>SBB: none | |
| <br> ❌ scroll propagation | |
| <br> ❌ overscroll affordance | |
| </div> | |
| </div> | |
| <div class="scroller" style="scroll-boundary-behavior: contain;"> | |
| <div>SBB: contain | |
| <br> ❌ scroll propagation | |
| <br> ✅ overscroll affordance | |
| </div> | |
| </div> | |
| <div class="scroller" style="scroll-boundary-behavior: auto;"> | |
| <div>SBB: auto | |
| <br> ✅ scroll propagation | |
| <br> ✅ overscroll affordance | |
| </div> | |
| </div> | |
| <div class="scroller" style=" scroll-boundary-behavior-y: none; scroll-boundary-behavior-x: auto;"> | |
| <div>SBB-y: none; SBB-x: auto; | |
| <br> ❌ vertical scroll propagation | |
| <br> ✅ horizontal scroll propagation | |
| <br> ✅ overscroll glow | |
| </div> | |
| </div> | |
| </container> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment