Comment faire défiler vers la gauche en charge en div débordé vers un nom de classe spécifique?

Question

Comment faire défiler vers la gauche à l'élément qui a la classe pincard-checked, Ci-dessous est ce que j'ai essayé de ne rien faire. Merci pour toute aide.

HTML:

<div class="pinGridWrapper"> 
<div class="pinGrid"> 


<div class="pin"> content </div> 
<div class="pin"> content </div> 
<div class="pin pincard-checked"> content </div> 
<div class="pin"> content </div> 

</div> 
</div> 

CSS:

.pinGridWrapper { 
    overflow-x:scroll; 
    overflow-y:hidden; 
    width:100%; 
    padding: 0px; 
} 

.pinGrid { 
display:inline-flex; 
list-style: none; 
padding:0px; 
} 

.pin { 
width:300px; 
background: #fff; 
margin:0px 10px 0px 10px; 
position: relative; 
height:525px; 
margin-top:10px; 
display:inline-block; 
overflow-y:hidden; 
box-shadow: 0 1px 4px rgba(0, 0, 0, .3); 
} 

JS:

$(document).ready(function(){ 
     $('.pinGridWrapper').animate({scrollLeft: $('.pincard-checked').offset().left}, 800); 
     return false; 
    }); 

FIDDLE

MISE À JOUR: Je pense que le problème est dû à l'aide-flex en ligne sur PING débarrasser. Juste au cas où quelqu'un l'aurait déjà rencontré auparavant.

Answer 1

Essayez cette chèque https://jsfiddle.net/hzeLekht/

$(document).ready(function() { 
    $('html,body').animate({ 
     scrollTop: $('.pincard-checked').offset().top 
    }, 800, function() { 
    }); 
}); 

Answer 2

Il semble que ce fut la façon de le faire.

Pour tous ceux qui pourraient avoir besoin de faire cela à l'avenir, assurez-vous que le script de défilement est chargé après la page, sinon rien ne se passera.

$(document).ready(function() { 
     $('.pinGridWrapper').animate({ 
      scrollLeft: $('.pincard-checked').offset().left 
     }, 1000, function() { 
     }); 
    }); 

FIDDLE