Question

当我使用jQuery的<?php $thispost = $post->ID; // Posts Per Page option $ppp = 30; // find out on which page are we $paging = isset( $_GET['list'] ) && ! empty( $_GET['list'] ) ? $_GET['list'] : 1 ; // arguments for listed pages $args = array( 'post_parent' => $thispost, 'posts_per_page' => $ppp, 'post_type' => 'page', 'paged' => $paging, 'orderby' => 'post_title', 'order' => 'ASC', ); $pages = get_posts( $args ); if ( count( $pages ) > 0 ) { echo '<ul>'; foreach ( $pages as $post ) { setup_postdata($post); echo '<li><a href="'.get_permalink( $post->ID ).'">'.$post->post_title.'</a></li>'; } echo '</ul>'; } else { echo '<p>No pages!</p>'; } $pages = get_pages('child_of='.$thispost); $count_pages = ceil (count($pages) / $ppp); // display the navigation if ( $count_pages > 0 ) { echo '<div> Pàg. '; for ($i = 1; $i <= $count_pages; $i++) { $separator = ( $i < $count_pages ) ? ' | ' : ''; $url_args = add_query_arg( 'list', $i ); echo "<a href='$url_args'>$i</a>".$separator; } echo '</div>'; } wp_reset_postdata(); ?>函数将一些元素添加到可滚动列表中时，我最初位于列表顶部，该列表会自动滚动到添加的第一个元素的顶部，并且不会保留位置。我该如何预防？

这是我的代码示例，显示了我的问题：

prepend()

jQuery(document).ready(function($) {
  $("button").click(function() {
    [1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(function() {
      $("div").prepend("<span class='new'></span>");
    });
  });
});

div {
  border: 1px solid;
  width: 200px;
  height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
}

span {
  height: 40px;
  width: 200px;
  display: block;
  background: gray;
}

span.new {
  background: red !important;
}

span:nth-child(odd) {
  background: lightgray;
}

Answer 1

如果要保持滚动位置，可以跟踪div的scrollTop位置和scrollHeight，然后使用scrollTop –例如：

jQuery(document).ready(function($) {
  $("button").click(function() {
    let $div = $("div");
    let top = $div.scrollTop();
    let scrollHeight = $div.prop("scrollHeight");
    [1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(function() {
      $div.prepend("<span class='new'></span>")
    });
    $div.scrollTop(top + $div.prop("scrollHeight") - scrollHeight);
  });
});

div {
  border: 1px solid;
  width: 200px;
  height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
}

span {
  height: 40px;
  width: 200px;
  display: block;
  background: gray;
}

span.new {
  background: red !important;
}

span:nth-child(odd) {
  background: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<button>Prepend elements</button>

在顶部添加新元素时，如何将位置保持在可滚动列表中？

1 个答案: