水平自动滚动到活动缩略图 li

Question

我有水平书页图像缩略图 ul li，超过 100 张图像，我已经给文本框输入页码以激活该页面并查看该页面，它工作没有任何问题，但它不是自动滚动对于 ul 中的那个活跃的 li，我是 JavaScript 的初学者，请帮助我，下面是我的代码

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

演示检查我的代码， https://jsfiddle.net/Looper/dmug0zxz/1/

Answer 1

可以在 window 上使用 jquery 的 scrollTop 来做一些滚动：

$(window).scrollLeft($('#book-list li:nth-child('+ currentKey +')').scrollLeft())

您可以在这里查看 scrollLeft 函数：jQuery

此外，您还可以通过以下方式实现平滑滚动：

$('html,body').animate({ scrollLeft: xxx})

Answer 2

你能试试这个吗

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

水平自动滚动到活动缩略图 li

horizontally auto scroll to active thumbnail li

javascript

jquery

autoscroll