Получение абсолютного положения элементов внутри фиксированного контейнера div - PullRequest
Новая
       12

Получение абсолютного положения элементов внутри фиксированного контейнера div

0 голосов
/ 18 июня 2020

У меня есть список страниц и контейнер, а также список ссылок на каждую страницу, я использую animate () функцию jquery, чтобы перейти на желаемую страницу с помощью страницы offset (). Top value, и он работает в первый раз, но после этого, если я нажимаю ссылку на другую страницу, offset (). Top positon не то же самое, и он начинает делать странные вещи ...

Вот фрагмент кода, который показывает проблему 

<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>

Желаемый результат - плавное перемещение между страницами, без изменения фактической структуры было бы лучше всего.

1 Ответ

1 голос
/ 18 июня 2020

Вам нужно учитывать position() вместо offset(), и вы не должны делать это на лету, а только один раз при загрузке страницы.

Вы можете попробовать, как показано ниже: 

$("#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>

Метод .position() позволяет нам получить текущую позицию элемента (в частности, его поля поля) относительно родительского смещения (в частности, его поле заполнения, которое исключает поля и границы). Сравните это с .offset(), который извлекает текущую позицию относительно документа. При размещении нового элемента рядом с другим и внутри того же содержащего DOM-элемента, .position() является более полезным. исх.

...