docs(API): align embedded examples, remove scroll area in example con…

…tainer (mdn#23400)
teoli2003 · Jan 5, 2023 · 158f255 · 158f255
1 parent a6517c0
commit 158f255
Showing 1 changed file with 33 additions and 7 deletions.
diff --git a/files/en-us/web/api/element/scrollend_event/index.md b/files/en-us/web/api/element/scrollend_event/index.md
@@ -85,19 +85,45 @@ element.addEventListener("scrollend", (event) => {
 });
 ```
 
-{{EmbedLiveSample("Using_scrollend_with_an_event_listener", "100%", 120)}}
+{{EmbedLiveSample("Using_scrollend_with_an_event_listener", "100%", 130)}}
 
 ### Using `onscrollend` event handler property
 
 The following example shows how to use the `onscrollend` event handler property to detect when the user has stopped scrolling:
 
+```css hidden
+#scroll-box {
+ height: 100px;
+ width: 100px;
+ float: left;
+ overflow: scroll;
+ outline: 4px dotted;
+ margin: 4px;
+}
+
+#scroll-box-title {
+ position: fixed;
+ top: 5px;
+ left: 5px;
+ transform: translateX(0);
+}
+
+#large-element {
+ height: 200px;
+ width: 200px;
+}
+
+#output {
+ text-align: center;
+}
+```
+
 ```html
-<div
- id="scroll-box"
- style="overflow: scroll; height: 100px; width: 100px; float: left;">
- <p style="height: 200px; width: 200px;">Scroll me!</p>
+<div id="scroll-box">
+ <p id="scroll-box-title">Scroll me!</p>
+ <p id="large-element"></p>
 </div>
-<p id="output" style="text-align: center;">Waiting on scroll events...</p>
+<p id="output">Waiting on scroll events...</p>
 ```
 
 ```js
@@ -113,7 +139,7 @@ element.onscrollend = (event) => {
 };
 ```
 
-{{EmbedLiveSample("Using_onscrollend_event_handler_property", "100%", 120)}}
+{{EmbedLiveSample("Using_onscrollend_event_handler_property", "100%", 130)}}
 
 ## Specifications