| 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 |