jquery scrollLeft 100％

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を使用 - あなたは最高のコンテンツ幅と使用を得ることができるようにそのスクロール量として。

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>