Question

我有几个部分，每个部分包含许多文章。这些文章的文字带有overflow: scroll的溢出文字，因此每篇文章可能都有自己的滚动位置。

有什么方法可以重新排列这些部分而又不会丢失其文章的滚动位置？

PS：实际上，我必须更改DOM结构，而不仅仅是外观。

PPS：我可以遍历每个部分和每篇文章，并将它们保存在变量中，然后将滚动位置重新应用于每篇文章。但这似乎是一种解决方法。

$(document).click(function() {
  
  $('section:first-of-type').appendTo('body');
  
})

section {
  display: flex;
}

article {
  height: 100px;
  overflow: scroll;
  border: 2px solid black;
}

#one { background-color: lightcoral; }
#two { background-color: lightblue; }

<section id="one">
  
  <article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit doloribus quos voluptatem, blanditiis perspiciatis consequatur, consectetur totam omnis vero perferendis harum iusto magni recusandae eaque nobis esse aperiam minus cumque.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolores, nostrum omnis itaque, architecto blanditiis dolor aliquam natus, velit quia optio ipsam fuga voluptate error veniam quas provident doloribus reprehenderit?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit blanditiis, excepturi dolores placeat laborum rerum possimus deserunt eligendi repellendus quasi, sequi obcaecati cum ipsa fugit qui praesentium. Ipsam, similique in.
  </article>

  <article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit doloribus quos voluptatem, blanditiis perspiciatis consequatur, consectetur totam omnis vero perferendis harum iusto magni recusandae eaque nobis esse aperiam minus cumque.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolores, nostrum omnis itaque, architecto blanditiis dolor aliquam natus, velit quia optio ipsam fuga voluptate error veniam quas provident doloribus reprehenderit?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit blanditiis, excepturi dolores placeat laborum rerum possimus deserunt eligendi repellendus quasi, sequi obcaecati cum ipsa fugit qui praesentium. Ipsam, similique in.
  </article>
  
  <article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit doloribus quos voluptatem, blanditiis perspiciatis consequatur, consectetur totam omnis vero perferendis harum iusto magni recusandae eaque nobis esse aperiam minus cumque.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolores, nostrum omnis itaque, architecto blanditiis dolor aliquam natus, velit quia optio ipsam fuga voluptate error veniam quas provident doloribus reprehenderit?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit blanditiis, excepturi dolores placeat laborum rerum possimus deserunt eligendi repellendus quasi, sequi obcaecati cum ipsa fugit qui praesentium. Ipsam, similique in.
  </article>
  
</section>
  
<section id="two">
  
  <article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit doloribus quos voluptatem, blanditiis perspiciatis consequatur, consectetur totam omnis vero perferendis harum iusto magni recusandae eaque nobis esse aperiam minus cumque.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolores, nostrum omnis itaque, architecto blanditiis dolor aliquam natus, velit quia optio ipsam fuga voluptate error veniam quas provident doloribus reprehenderit?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit blanditiis, excepturi dolores placeat laborum rerum possimus deserunt eligendi repellendus quasi, sequi obcaecati cum ipsa fugit qui praesentium. Ipsam, similique in.
  </article>
  
  <article>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit doloribus quos voluptatem, blanditiis perspiciatis consequatur, consectetur totam omnis vero perferendis harum iusto magni recusandae eaque nobis esse aperiam minus cumque.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolores, nostrum omnis itaque, architecto blanditiis dolor aliquam natus, velit quia optio ipsam fuga voluptate error veniam quas provident doloribus reprehenderit?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit blanditiis, excepturi dolores placeat laborum rerum possimus deserunt eligendi repellendus quasi, sequi obcaecati cum ipsa fugit qui praesentium. Ipsam, similique in.
  </article>
  
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

您可以使用scrollTop()

保存元素的滚动位置

保存然后使用npm run dev放入数组

重新排列元素

并使用保存的数组（在元素中形成map()）恢复滚动位置：

.each()

$('#swap').click(function() {

    //Simple trick to swap sections
    $(this).toggleClass('active')
    
    //Saves all scroll position's of section 1
    let arrSectionOne = $('#section1 .overflow').map(function(){ return $(this).scrollTop(); }).get();
    
    //Saves all scroll position's of section 2
    let arrSectionTwo = $('#section2 .overflow').map(function(){ return $(this).scrollTop(); }).get();
    
    if($(this).hasClass('active'))
      $("#section1").before($("#section2"));
    else
      $("#section1").after($("#section2"));
      
    //Restore Scroll Positions
    $('#section1 .overflow').each(function(i){
        $(this).scrollTop(arrSectionOne[i]);
    })
    
    $('#section2 .overflow').each(function(i){
        $(this).scrollTop(arrSectionTwo[i]);
    })
    
});

.overflow {
  width: 330px;
  max-height: 150px;
  overflow-y: scroll;
}

jQuery更改现有元素的顺序，同时保持滚动位置

1 个答案: