| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page with overflow</title> |
| <style> |
| #over { |
| width:400px; |
| height: 300px; |
| overflow-x: hidden; |
| overflow-y: scroll; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="over"> |
| <div style="width: 5000px;"> |
| <div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').textContent='ok'">Click right</a></div> |
| </div> |
| <div style="height: 5000px; width: 5000px;"> |
| Right clicked: <span id="right-clicked"></span></br> |
| Bottom clicked: <span id="bottom-clicked"></span></br> |
| Bottom-right clicked: <span id="bottom-right-clicked"></span></br> |
| </div> |
| <div style="width: 5000px;"> |
| <div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').textContent='ok'">Click bottom-right</a></div> |
| </div> |
| <a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').textContent='ok'">Click bottom</a> |
| </div> |
| </body> |
| </html> |
