Horizontally Auto Scroll To Active Thumbnail Li
i have horizontal book page image thumbnail ul li, more than 100 image, i have given text box to enter page number to active that page and view that page, it is working without any
Solution 1:
can you try this
<!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() {
var i = $(this).val() -1;
activeBook(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');
}
});
</script></body></html>Solution 2:
One can use jquery's scrollTop on window to do some scrolling:
$(window).scrollLeft($('#book-list li:nth-child('+ currentKey +')').scrollLeft())
You can have a look at scrollLeft function here: jQuery
In addition, you can do some cool trick for smooth scrolling by this:
$('html,body').animate({ scrollLeft: xxx})
Post a Comment for "Horizontally Auto Scroll To Active Thumbnail Li"