Question

我需要父div的子项水平滚动。滚动应该是动画的，它应该滚动100％的父级宽度。

我要么知道如何在这里使用百分比，要么如何为这个问题编写正确的var。

这是我的代码：

var maxscroll = $('#content').width()

$('.prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=maxscroll"
  }, 500);
});

 $('.next').click(function() {
  event.preventDefault();
  $('#content').animate({
   scrollLeft: "+=maxscroll"
  }, 500);
});

Answer 1

这种方法使用包装器的概念作为内部内容 - 我在这里用固定宽度的P来说明 - 这样你就可以获得最大内容宽度并将其用作滚动量。

＆＃13;

var maxscroll = $('#content')[0].scrollWidth

$('.prev').click(function() {
  event.preventDefault();
  $('#container').animate({
    scrollLeft: -1 * maxscroll
  }, 500);
});

 $('.next').click(function() {
  event.preventDefault();
  $('#container').animate({
   scrollLeft: maxscroll
  }, 500);
});

＆＃13;

div#container {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
  }
  #content {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class='prev' >Prev</button>
<button class='next' >Next</button>

<div  id="container" ><p id ='content'>Hello</p></div>

＆＃13;

jquery scrollLeft 100％

1 个答案: