Question

我想这样做，当我点击每个数字时，该数字将滚动到容器的中心。这是我到目前为止在jsfiddle中得到的。 https://jsfiddle.net/bf3nv33d/2/

这是代码..

html
<div id='container'>
  <div id='scrollbox'>
  </div>
  <div id='display'>
  </div>
</div>

css
#container{
  border:1px solid blue;
  height:200px;
  width:200px;  
}
#scrollbox{
  height:43px;
  overflow-x:scroll;
  overflow-y:hidden;
  white-space:nowrap;
}
.numberbox{
  display: inline-block;
  background-color: white;
  padding: 2px 2px 2px 2px;
  width:20px;
  border-right:1px solid green;
}

jquery
for(var i=1; i<21; i++){
var numberbox = "<div class='numberbox numberbox"+i+"'>"+i+"</div>";
$('#scrollbox').append(numberbox);
}

$('.numberbox').on('click', function(){
    $('.numberbox').css('background-color', 'white');
    $(this).css('background-color', 'yellow');
  $('#scrollbox').animate({
    scrollLeft: $('.numberbox4').offset().left}, 200);
});

Answer 1

＆＃13;

for(var i=1; i<21; i++){
var numberbox = "<div class='numberbox' id='"+i+"'>"+i+"</div>";
$('#scrollbox').append(numberbox);
}

$('.numberbox').on('click', function(){
	$('.numberbox').css('background-color', 'white');
	$(this).css('background-color', 'yellow');
  $('#scrollbox').animate({
  	scrollLeft: this.id*25-112.5}, 200);
});

＆＃13;

#container{
  border:1px solid blue;
  height:200px;
  width:200px;
  
}
#scrollbox{
  height:43px;
  overflow-x:scroll;
  overflow-y:hidden;
  white-space:nowrap;
}
.numberbox{
  display: inline-block;
  background-color: white;
  padding: 2px 2px 2px 2px;
  width:20px;
  border-right:1px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <div id='scrollbox'>
  
  </div>
  <div id='display'>
  
  </div>
</div>

＆＃13;

这是你在找什么？我使用id跟踪箱号并移动到该位置，再加上一半将其放在中间位置。

我有一个隐藏溢出的水平滚动，当我点击它时如何让它滚动到中心？

1 个答案: