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 problem but it is not auto scrolling to that active li in ul, i'm beginner to JavaScript please help me with this, bellowis my code

HTML

   <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>

  <ul class="book-list" id="book-list">
        <?php if ($total_page > 0) : ?>
        <?php foreach ($results as $row) : ?>
        <li class="book">
            <span class="page-number" id="active-page-number"><?php echo $page_num++ ?></span>
            <img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Page">
        </li>
        <?php endforeach ?>
        <?php endif ?>
  </ul>

JavaScript

var bookCurrentPages = $('.book #active-page-number');
$('#current-page').keypress(function(e) { 
    var userInput = $('#current-page').val();
    if (this.value.length == 0 && e.which == 48){
        // disable enter zero
        return false;
    }
    else if (e.keyCode == 13) {
        bookCurrentPages.each(function (key) {
            var numKey = key + 1;
            if (userInput == numKey) {
                // console.log(numKey + " success");
                var currentKey = userInput;   
                // console.log(currentKey);
                $('#book-list li:nth-child('+ currentKey +')').children('img').trigger('click');
            }
        })
    return false; // prevent the button click from happening
    }
});

Demo check my codes, https://jsfiddle.net/Looper/dmug0zxz/1/

回答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>
   <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);
		});
		$('.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>

回答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})

来源：https://stackoverflow.com/questions/47966545/horizontally-auto-scroll-to-active-thumbnail-li

标签

javascript

jquery

autoscroll