【发布时间】：2018-08-07 17:09:31
【问题描述】：
我的网页上有一个水平缩略图滚动条，我正在使用here 提供的代码滚动到缩略图库中的特定图像。但是，当我使用 F5 重新加载页面时，图库会返回到第一个图像位置。这成为一个问题，因为我的缩略图库有大约 7500 张图片。
我修改了这段代码，将 addEventListener 添加到窗口 onload 中，并将最后点击的缩略图保留为 localStorage 中的索引值。在窗口加载时，我使用索引将滚动条推到最后点击的图像位置。但它不起作用，我也没有收到任何错误。修改后的代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
li{display: table-cell; padding:20px;}
ul{display: table-row; }
.cont{overflow: auto;}
li.active{border: 1px solid blue;}
</style>
</head>
<body>
<div class="book-list-headbox">
<div class="page-number-box">
<label for="" id="total-page" value="" class="mb-0"></label>
<span class="separator">of</span>
<input type="text" id="current-page" value="1">
</div>
</div>
<div class="cont">
<ul class="book-list" id="book-list">
<li class="book active"><img src="http://via.placeholder.com/300x300/?text=1" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=2" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=3" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=4" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=5" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=6" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=7" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=8" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=9" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=11" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=12" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=13" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=14" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=15" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=16" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=17" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=18" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=19" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=20" alt="Book Page"></li>
</ul>
</div>
<div>another content</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(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');
}
});
})
</script>
</body>
</html>
【问题讨论】：
标签： javascript jquery html