Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery

Javascript Retain The Horizontal Scroll Bar Position On Reload

Post a Comment
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:

  1. Set a variable on your onLoad listner and put 0 (the first photo) or your localStorage.getItem('clicki') if is > 0 (or true)

  2. 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><divclass="book-list-headbox"><divclass="page-number-box"><labelfor=""id="total-page"value=""class="mb-0"></label><spanclass="separator">of</span><inputtype="text"id="current-page"value="1"></div></div><divclass="cont"><ulclass="book-list"id="book-list"><liclass="book active"><imgsrc="http://via.placeholder.com/300x300/?text=1"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=2"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=3"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=4"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=5"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=6"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=7"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=8"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=9"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=11"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=12"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=13"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=14"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=15"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=16"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=17"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=18"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=19"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=20"alt="Book Page"></li></ul></div><div>another content</div><scriptsrc="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);
  });


  functionsetStorage(myNum){
    localStorage.setItem('clicki', myNum);
    activeBook(myNum);
  }

  functionactiveBook(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><divclass="book-list-headbox"><divclass="page-number-box"><labelfor=""id="total-page"value=""class="mb-0"></label><spanclass="separator">of</span><inputtype="text"id="current-page"value="1"></div></div><divclass="cont"><ulclass="book-list"id="book-list"><liclass="book active"><imgsrc="http://via.placeholder.com/300x300/?text=1"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=2"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=3"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=4"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=5"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=6"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=7"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=8"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=9"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=10"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=11"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=12"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=13"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=14"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=15"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=16"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=17"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=18"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=19"alt="Book Page"></li><liclass="book"><imgsrc="http://via.placeholder.com/300x300/?text=20"alt="Book Page"></li></ul></div><div>another content</div><scriptsrc="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());
    });

    functionactiveBook(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());
    });

    functionactiveBook(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"