Javascript在重新加载时保留水平滚动条位置

我的网页上有一个水平缩略图滚动条，我使用此处给出的代码滚动到缩略图库中的特定图像。 但是，当我使用F5重新加载页面时，库将返回到第一个图像位置。 这成为一个问题，因为我的缩略图库有大约7500张图像。

我通过向窗口onload添加addEventListener来修改此代码，并将最后单击的缩略图保留为localStorage中的索引值。 在窗口onload上，我使用索引将滚动条推到最后点击的图像位置。 但它没有工作，也没有任何错误。 修改后的代码如下：

    li{display: table-cell; padding:20px;} ul{display: table-row; } .cont{overflow: auto;} li.active{border: 1px solid blue;}    
 
  of  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
another content
   $(function(){ $('#current-page').change(function() { var i = $(this).val() -1; activeBook(i); localStorage.setItem('clicki', i); }); $('.book-list').on('click', '.book', function(){ activeBook($(this).index()); }); function activeBook(i){ $('.book').removeClass('active'); var active = $('.book').eq(i).addClass('active'); var left = active.position().left; var currScroll= $(".cont").scrollLeft(); var contWidth = $('.cont').width()/2; var activeOuterWidth = active.outerWidth()/2; left= left + currScroll - contWidth + activeOuterWidth; $('.cont').animate( { scrollLeft: left },'slow'); } }); window.addEventListener('load', function() { $(function(){ $('#current-page').change(function() { //I tried changing this to onload function var clicki = localStorage.getItem('clicki'); alert(clicki); //This alert also doesn't work. var i = clicki; activeBook(i); }); $('.book-list').on('click', '.book', function(){ activeBook($(this).index()); }); function activeBook(i){ $('.book').removeClass('active'); var active = $('.book').eq(i).addClass('active'); var left = active.position().left; var currScroll= $(".cont").scrollLeft(); var contWidth = $('.cont').width()/2; var activeOuterWidth = active.outerWidth()/2; left= left + currScroll - contWidth + activeOuterWidth; $('.cont').animate( { scrollLeft: left },'slow'); } }); })    

Answer 1

你可以这样做：

1. 在你的onLoad列表器上设置一个变量，如果> 0（或者是真），则输入0（第一张照片）或你的localStorage.getItem('clicki') ）

2. 然后使用activeBook(clicki); 。

试试吧：

       
 
  of  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
another content
     

PS ：我在你点击img时创建了一个设置localStorage的function。 如果它对您不重要，请将其删除。

Answer 2

下面的代码将满足您的需求。

       
 
  of  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
another content
     

我刚刚将您的代码更改为window load 。 因此，当window load成功时会自动触发。 试图将其保存为单个html文件并在apache server运行，您将获得预期的结果。