| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| #scrollable { |
| margin-top: 50px; |
| margin-left: 50px; |
| width: 200px; |
| height: 200px; |
| overflow: scroll; |
| } |
| #touchaction { |
| touch-action: pan-y; |
| } |
| .content { |
| width: 1000px; |
| height: 900px; |
| } |
| #handler { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div id="scrollable"> |
| <div id="touchaction"> |
| <div id="handler"></div> |
| <div class="content"></div> |
| </div> |
| </div> |
| <script> |
| // A blocking touch handler should prevent scrolling in that region. |
| document.getElementById('handler').addEventListener('touchstart', function(e) { |
| e.preventDefault(); |
| }); |
| </script> |
| </body> |
| </html> |
