Javascript在重新加载时保留水平滚动条的位置 [英] Javascript retain the horizontal scroll bar position on reload
本文介绍了Javascript在重新加载时保留水平滚动条的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
I have a horizontal thumbnail scroll bar on my webpage and I am using the code given here to scroll to a particular image in the thumbnail gallery. However, when I reload the page with F5, the gallery returns to the first image location. This becomes a problem since my thumbnail gallery has around 7500 images.
我已通过将addEventListener添加到窗口onload来修改了此代码，并将最后单击的缩略图保留为localStorage中的索引值.在窗口加载时，我正在使用索引将滚动条推到最后单击的图像位置.但这是行不通的，我也没有收到任何错误.修改后的代码如下:
I have modified this code by adding an addEventListener to the window onload and retained the last clicked thumbnail as the index value in localStorage. On window onload, I am using the index to push the scroller to the last clicked image location. But it doesn;t work, nor i am getting any errors. The modified code is as follows:
<!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>
推荐答案
您可以执行以下操作:
-
在onLoad列表器上设置一个变量，然后将0(第一张照片)或
localStorage.getItem('clicki')设置为> 0(或true)
Set a variable on your onLoad listner and put 0 (the first photo) or your
localStorage.getItem('clicki')if is > 0 (or true)
然后使用activeBook(clicki);.
尝试一下:
<!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() {
setStorage($(this).val() -1)
});
$('.book-list').on('click', '.book', function(){
setStorage($(this).index())
});
});
window.addEventListener('load', function() {
var clicki = (localStorage.getItem('clicki')) ? (localStorage.getItem('clicki')) : 0 ;
// alert(clicki);
activeBook(clicki);
});
function setStorage(myNum){
localStorage.setItem('clicki', myNum);
activeBook(myNum);
}
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>
PS :当您单击img时，我创建了一个用于设置localStorage的函数.如果对您不重要，请将其删除.
PS: I created a function to set localStorage also when you click on img. Remove it, if it is not important for you.
这篇关于Javascript在重新加载时保留水平滚动条的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
