button-inside-scroll-container.html 943 B

12345678910111213141516171819202122232425262728293031323334
  1. <!DOCTYPE html>
  2. <link rel="match" href="reference/button-inside-scroll-container-ref.html" />
  3. <style>
  4. #scrollable {
  5. height: 300px;
  6. overflow: scroll;
  7. }
  8. input[type="submit"] {
  9. display: block;
  10. width: 100px;
  11. height: 100px;
  12. background-color: green;
  13. outline: none;
  14. border: 5px solid magenta;
  15. box-sizing: border-box;
  16. }
  17. </style>
  18. <div id="scrollable">
  19. <input type="submit" value="1" />
  20. <input type="submit" value="2" />
  21. <input type="submit" value="3" />
  22. <input type="submit" value="4" />
  23. <input type="submit" value="5" />
  24. <input type="submit" value="6" />
  25. <input type="submit" value="7" />
  26. <input type="submit" value="8" />
  27. <input type="submit" value="9" />
  28. <input type="submit" value="10" />
  29. </div>
  30. <script>
  31. const scrollContainer = document.getElementById("scrollable");
  32. scrollContainer.scrollTop = 100;
  33. </script>