使用窗口滚动条控制溢出的div的滚动-Javascript

Question

I have a div with an overflow-x:auto which contains an element which is too wide for the div so it scrolls. The problem being the element is too tall and it's rather cumbersome to use the element's scrollbars to view its content.

What would be nicer is to use the window scrollbars to control the scrolling of the element as their position is fixed on the edge of the window.

Is that possible at all? I can't seem to get my head around a good approach of doing so.

Example of the problem below. Note this wrapper element has to be capable of working within the flow of an existing page layout.

https://jsfiddle.net/3y1549jk/2/

 .wrapper { position: absolute; width: 75%; left: 12.5%; right: 12.5%; height: 200%; top: 12.5%; bottom: 12.5%; background-color: red; overflow-x: auto; } .content { position: absolute; width: 150%; height: 75%; margin: 7.5%; background-color: blue; color: white; padding: 7.5%; } 

 <!-- I would like the window to control the horizontal scrolling of the .wrapper div --> <div class="wrapper"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at libero imperdiet justo finibus vehicula. Integer ac risus quis lectus pretium condimentum in sit amet mauris. Maecenas et sagittis justo. Cras diam urna, placerat aliquet metus non, interdum cursus nisl. Quisque cursus elit feugiat, tempus diam in, faucibus felis. </div> </div> 

Answer 1

Use position fixed instead of absolute ..

 .wrapper { position: absolute; width: 75%; left: 12.5%; right: 12.5%; height: 200%; top: 12.5%; bottom: 12.5%; background-color: red; overflow-x: auto; } .content { position: fixed; width: 150%; height: 75%; margin: 7.5%; background-color: blue; color: white; padding: 7.5%; } 

 <!-- I would like the window to control the horizontal scrolling of the .wrapper div --> <div class="wrapper"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at libero imperdiet justo finibus vehicula. Integer ac risus quis lectus pretium condimentum in sit amet mauris. Maecenas et sagittis justo. Cras diam urna, placerat aliquet metus non, interdum cursus nisl. Quisque cursus elit feugiat, tempus diam in, faucibus felis. </div> </div>