Javascript Retain The Horizontal Scroll Bar Position On Reload
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
Solution 1:
You could do something like that:
Set a variable on your onLoad listner and put 0 (the first photo) or your
localStorage.getItem('clicki')if is > 0 (or true)Then use
activeBook(clicki);.
Try it:
<!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: I created a function to set localStorage also when you click on img. Remove it, if it is not important for you.
Solution 2:
Below code will satisfy your needs.
<!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=10" 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() {
var clicki = localStorage.getItem('clicki');
var i = clicki;
activeBook(i);
$('.book-list').on('click', '.book', function(){
activeBook($(this).index());
});
function activeBook(i){
$('#current-page').val(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>
I just changed your code to window load.
So it triggers automatically when window load successfully.
Tried to save this as one single html file and run in apache server you will get what you expected.
Post a Comment for "Javascript Retain The Horizontal Scroll Bar Position On Reload"