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