Getting absolute position of elements inside fixed div container
Question
I have a list of pages and a container and a list of links to every page, i'm using the animate() function of jquery to move to the desired page using the page's offset().top value and it works the first time but after that if I click another page's link the offset().top positon is not the same and it starts doing weird things...
Here's a code snippet that shows the issue
<html> <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> </head> <body style="margin: 0px; padding: 0px; background-color: #AFAFAF;"> <div style="position: fixed; top: 0; left: 0; background-color: white; width: 100px; height: 120px; z-index: 99"> <a href="#" onclick="goToPage(1);">Go to page 1</a><br> <a href="#" onclick="goToPage(2);">Go to page 2</a><br> <a href="#" onclick="goToPage(3);">Go to page 3</a><br> <a href="#" onclick="goToPage(4);">Go to page 4</a><br> <a href="#" onclick="goToPage(5);">Go to page 5</a><br> <a href="#" onclick="goToPage(6);">Go to page 6</a> </div> <div id="divContainer"> <div id="fixedContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"> <div id="pageContainer" style="margin: 0 auto; height: 100%; max-width: 800px; position: relative; overflow-y: scroll; transition: all 0.3s ease-out 0s;"> <div id="page1" style="position: relative; height: 1200px; background-color: lightblue;"> </div> <div id="page2" style="position: relative; height: 1200px; background-color: lightcoral;"> </div> <div id="page3" style="position: relative; height: 1200px; background-color: lightcyan;"> </div> <div id="page4" style="position: relative; height: 1200px; background-color: lightgoldenrodyellow;"> </div> <div id="page5" style="position: relative; height: 1200px; background-color: lightgray;"> </div> <div id="page6" style="position: relative; height: 1200px; background-color: lightgreen;"> </div> </div> </div> </div> <script> function goToPage(elementId) { $('#pageContainer').animate({ scrollTop: $('#page' + elementId).offset().top }, 1200); } </script> </body> </html>
The desired outcome would be moving seamlessly between pages, without modifying the actual structure would be the best.
1 answers
solution1
1 ACCPTED 2020-06-18 20:08:07
You need to consider position() instead of offset() and you should not do it on the fly but only once at the page load.
You can try like below:
$("#pageContainer > div").each(function() { $(this).attr("offset",$(this).position().top); }) function goToPage(elementId) { $('#pageContainer').animate({ scrollTop: $('#page' + elementId).attr('offset') }, 1200); }
<html> <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> </head> <body style="margin: 0px; padding: 0px; background-color: #AFAFAF;"> <div style="position: fixed; top: 0; left: 0; background-color: white; width: 100px; height: 120px; z-index: 99"> <a href="#" onclick="goToPage(1);">Go to page 1</a><br> <a href="#" onclick="goToPage(2);">Go to page 2</a><br> <a href="#" onclick="goToPage(3);">Go to page 3</a><br> <a href="#" onclick="goToPage(4);">Go to page 4</a><br> <a href="#" onclick="goToPage(5);">Go to page 5</a><br> <a href="#" onclick="goToPage(6);">Go to page 6</a> </div> <div id="divContainer"> <div id="fixedContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"> <div id="pageContainer" style="margin: 0 auto; height: 100%; max-width: 800px; position: relative; overflow-y: scroll; transition: all 0.3s ease-out 0s;"> <div id="page1" style="position: relative; height: 1200px; background-color: lightblue;"> </div> <div id="page2" style="position: relative; height: 1200px; background-color: lightcoral;"> </div> <div id="page3" style="position: relative; height: 1200px; background-color: lightcyan;"> </div> <div id="page4" style="position: relative; height: 1200px; background-color: lightgoldenrodyellow;"> </div> <div id="page5" style="position: relative; height: 1200px; background-color: lightgray;"> </div> <div id="page6" style="position: relative; height: 1200px; background-color: lightgreen;"> </div> </div> </div> </div> <script> </script> </body> </html>
The
.position()method allows us to retrieve the current position of an element (specifically its margin box) relative to the offset parent (specifically its padding box, which excludes margins and borders). Contrast this with.offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element,.position()is the more useful. ref
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.