button-inside-scroll-container.html 993 B

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