jquery 向左滚动 100%答案

【问题标题】：jquery scrollLeft 100%jquery 向左滚动 100%
【发布时间】：2017-02-12 17:59:24
【问题描述】：

我需要我的父 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);
});

【问题讨论】：

标签： javascript jquery scroll var

【解决方案1】：

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

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

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

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

【讨论】：