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

【问题标题】：horizontally auto scroll to active thumbnail li水平自动滚动到活动缩略图 li
【发布时间】：2017-12-25 07:18:18
【问题描述】：

我有水平书页图像缩略图 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/

【问题讨论】：

尽量提供一个活生生的例子，还需要加htmlcss。
心中有数，但需要先看看你的html
我已经添加了我的html

标签： javascript jquery autoscroll

【解决方案1】：

你可以试试这个

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

【讨论】：

这是我所期望的，谢谢你我试着告诉你
我在你发布你的小提琴之前做到了。只有当我有额外的时间时，我才会帮你弄清楚你现在的小提琴。祝你好运。
是的，你能解决这个问题吗，因为我试图将你的代码与我的代码合并，我遇到了问题
正如我所说的我正在学习java脚本，上面的jsfiddle代码是我自己的想法，告诉我是否有任何错误或它与你的代码有什么不同，因为你的代码比我的少
非常感谢你，但是下一个箭头不起作用我不知道为什么

【解决方案2】：

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

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

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

此外，您还可以通过以下方式实现一些很酷的平滑滚动技巧：

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

【讨论】：

它不起作用，如果我输入页码它甚至不会激活 li
我的错误是激活我输入了页面编号但没有滚动，滚动不起作用
@Looper 我正在构建一个 jsfiddle 来向您展示我的意思。请给我一点时间
scrollTop() 用于垂直滚动位置，但我问的是水平滚动：[
@Looper 很抱歉误读。您可以使用 scrollLeft 代替水平滚动