OLD | NEW |
(Empty) | |
| 1 <style> |
| 2 body { |
| 3 width: 100%; |
| 4 height: 100%; |
| 5 overflow-x: auto; |
| 6 overflow-y: auto; |
| 7 |
| 8 /* Specifies that each element’s snap coordinate should |
| 9 align with the center of the scroll container */ |
| 10 scroll-snap-destination: 50% 50%; |
| 11 -ms-scroll-snap-destination: 50% 50%; |
| 12 -webkit-scroll-snap-destination: 50% 50%; |
| 13 |
| 14 /* Requires that scrolling always end at a snap point |
| 15 when the operation completes (hard snap). */ |
| 16 scroll-snap-type: mandatory; |
| 17 -webkit-scroll-snap-type: mandatory; |
| 18 -ms-scroll-snap-type: mandatory; |
| 19 |
| 20 /* This is a webkit quirk */ |
| 21 -webkit-scroll-snap-points-x: elements; |
| 22 -ms-scroll-snap-points-x: elements; |
| 23 |
| 24 -webkit-overflow-scrolling: touch; |
| 25 } |
| 26 |
| 27 body > div { |
| 28 width: 300px; |
| 29 height: 300px; |
| 30 background-color: green; |
| 31 margin: 10px; |
| 32 |
| 33 scroll-snap-coordinate: 50% 50%; |
| 34 -ms-scroll-snap-coordinate: 50% 50%; |
| 35 -webkit-scroll-snap-coordinate: 50% 50%; |
| 36 } |
| 37 </style> |
| 38 <body></body> |
| 39 <script> |
| 40 var SNAP_ELEMENT_NO = 1000; |
| 41 for (var i = 0; i < SNAP_ELEMENT_NO; i++) { |
| 42 document.body.appendChild(document.createElement('div')); |
| 43 } |
| 44 </script> |
OLD | NEW |