Question

我有一个容器div，设置宽度和高度，溢出设置为滚动。在该div中是另一个我可以滚动的内容div。我想添加导航元素，它们会自动滚动到sepcified点（以像素为单位）。我目前正在使用Jquery，而不是在任何地方。任何帮助都会很棒！

这是我的HTML

<button class="scrollto"  style="position:fixed; top:100px;left:200px; width:150px;   height:50px; z-index:3;">purple_lamp</button>

<div id="container" >
  <div id="main_content">
    <img id="urban_chic" src="images/bg.jpg" />
    <img id="purple_lamp" src="images/purple_lamp.png" data-stellar-ratio="1.5"/>
    <img id="sofa" src="images/sofa.png" data-stellar-ratio="1.5"/>
    <img id="wall_clock" src="images/jacobs_wall_clock.png" data-stellar-ratio="1.5"/>
    <img id="yellow_shoe" src="images/yellow_shoe.png"  data-stellar-ratio="1.5" />
    <img id="intro" src="images/intro.jpg" />
  </div>
</div>

这是我的CSS

#container{
  height:768px;
  width:1024px;
  position:absolute;
  overflow:scroll;
}

#main_content{
  height:768px;
  width: 5454px;
  position:absolute;
}

我的JS

$('.scrollto').click(function() {
    $('#container').animate( { scrollRight: '+=500' }, 1000, 'easeOutQuad' );
});

Answer 1

没有scrollRight方法，您仍然需要使用scrollLeft并反转值：

$('.scrollto').click(function() {
    $('#container').animate( { scrollLeft: '-=500' }, 1000, 'easeOutQuad' );
});

FIDDLE

如何在div中的div上滚动左键单击

1 个答案: