在 Javascript 或 jQuery 中如何滚动以使另一个 div 内的元素垂直和水平居中

Question

I'm trying to use jQuery or Javascript to auto scroll so that the .innerElement is centered vertically and horizontally in the .wrapper scroll boxes.

Note that the scrollable area has to be inside of a div, it can't use the window viewport (since the final version of this will have multiple scrollable areas).

I tried this:

 $('.wrapper') .scrollTop($('.innerElement').position().top - ($('.wrapper').height() / 2)) .scrollLeft($('.innerElement').position().left - ($('.wrapper').width() / 2));

 body { overflow: hidden; } .wrapper { width: 100vw; height: 100vh; overflow: auto; } .inner { width: 5000px; height: 5000px; position: relative; } .innerElement { width: 20px; height: 20px; background: #000; top: 1400px; left: 1300px; position: absolute; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="inner"> <div class="innerElement"></div> </div> </div>

I can't wrap my head around the math on this.

Answer 1

I would recommend a different formula to calculate the required coords:

For Top offset: (ElementTop - (WrapperHeight / 2) + (ElementHeight / 2))
For Left offset: (ElementLeft - (WrapperWidth / 2) - (ElementWidth / 2))

Also you can make use of the native 'Scroll' method to achieve a smooth transition.

I attach a CodePen with the concept: https://codepen.io/geekzolanos-dev/pen/xxGEmRq