scroll-buttons-disabled-snapping-ref.html (1931B)
1 <!doctype html> 2 <title>CSS Test: ::scroll-button(*) :disabled triggers when snapping prevents further scrolling</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons"> 4 <style> 5 * { 6 margin: 0; 7 padding: 0; 8 } 9 10 .scroller { 11 width: 50px; 12 height: 50px; 13 overflow: hidden; 14 margin: 20px; 15 box-sizing: border-box; 16 } 17 18 .horizontal { 19 white-space: nowrap; 20 scroll-snap-type: x mandatory; 21 padding: 0 20px; 22 } 23 .vertical { 24 white-space: nowrap; 25 scroll-snap-type: y mandatory; 26 padding: 20px 0; 27 } 28 29 .scroller div { 30 background: lightblue; 31 border: 2px solid blue; 32 width: 45px; 33 height: 45px; 34 margin: 5px; 35 box-sizing: border-box; 36 scroll-snap-align: center; 37 } 38 39 .scroller.horizontal div { 40 display: inline-block; 41 } 42 43 .scroll-button { 44 background: green; 45 border: 1px solid black; 46 display: inline-block; 47 height: 20px; 48 width: 20px; 49 color: white; 50 box-sizing: border-box; 51 } 52 53 .scroll-button.disabled { 54 background: gray; 55 } 56 57 58 </style> 59 <div class="horizontal scroller"> 60 <div></div> 61 <div></div> 62 </div> 63 <div><div class="scroll-button inline-start disabled"></div><div class="scroll-button inline-end"></div></div> 64 <div class="horizontal scroller"> 65 <div></div> 66 <div></div> 67 </div> 68 <div><div class="scroll-button inline-start"></div><div class="scroll-button inline-end disabled"></div></div> 69 <div class="vertical scroller"> 70 <div></div> 71 <div></div> 72 </div> 73 <div><div class="scroll-button block-start disabled"></div><div class="scroll-button block-end"></div></div> 74 <div class="vertical scroller"> 75 <div></div> 76 <div></div> 77 </div> 78 <div><div class="scroll-button block-start"></div><div class="scroll-button block-end disabled"></div></div> 79 <script> 80 const scrollers = document.querySelectorAll('.scroller'); 81 scrollers[1].scrollLeft = 1000; 82 scrollers[3].scrollTop = 1000; 83 </script>