jquery scrollLeft 100%

Question

J'ai besoin que les enfants de mes parents div défilent horizontalement. Le défilement devrait être animé et il est supposé faire défiler 100% de la largeur des parents.

Je dois savoir comment utiliser les pourcentages ici ou comment écrire une variable correcte pour ce problème.

Voici mon code:

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

Cette approche utilise le concept d'une enveloppe pour le contenu intérieur - J'ai utilisé un P ici avec une largeur fixe pour illustrer - de sorte que vous pouvez obtenir la largeur du contenu max et de l'utilisation cela comme le montant du défilement.

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>