scrolll en div poussant en bas ou à gauche

Question

Je fais un MVC 5, application bootstrap.

J'ai une page avec des balises HTML. Je sais que pour monter ou descendre un contenu de page, il est nécessaire de l'incorporer dans une div avec une largeur et une hauteur fixes, donc vous devez faire défiler les deux directions pour atteindre tous les contenus. Ce que j'essaie de faire, c'est de simuler le défilement des téléphones, je veux dire, "pousser" (une touche) en bas ou à gauche pour faire défiler automatiquement le bas ou la gauche à l'intérieur de la div.

<div id="Div1" class="MenuUserPpal"> 
 
       <div class="dvParPal" 
 
        <img id="imgConf2" class="dvPPalImg" src="~/Content/Images/Iconos/Photos.png" /> 
 
       </div> 
 
       <div class="dvParPal"> 
 
        <img id="img22" class="dvPPalImg" src="~/Content/Images/Iconos/Activities.png" /> 
 
       </div> 
 
       <div class="dvParPal" title="Mis Foro" > 
 
        <img id="img42" class="dvPPalImg" src="~/Content/Images/Iconos/Foro.png" /> 
 
       </div> 
 
       
 
        <div class="dvParPal" > 
 
         <img id="img52" class="dvPPalImg" src="data:image;base64,@System.Convert.ToBase64String(Model.Picture)" /> 
 
        </div> 
 
       
 
       <div class="dvParPal" > 
 
        <img id="img12" class="dvPPalImg" src="~/Content/Images/Iconos/groups.png" /> 
 
       </div> 
 
       <div class="dvParPal" > 
 
        <div class="dvParPalImg" > 
 
        </div> 
 
       </div> 
 
       <div class="dvParPal"> 
 
        <img id="img8" class="dvPPalImg" src="~/Content/Images/Iconos/alerts.png" /> 
 
       </div> 
 
      
 
        <div id="dvMantenimiento" class="dvParPal" > 
 
         <img id="img7" class="dvPPalImg" src="~/Content/Images/Iconos/man.png" /> 
 
        </div> 
 
      </div>

Il est une façon de le faire? avec Jquery o bootstrap ou HTML?

Merci

Answer 1

Vous pouvez faire quelque chose comme

$('html, body').animate({scrollTop: '0px'}, 300); 

avec jQuery pour faire défiler vers le bas ou à gauche.

Answer 2

Si vous souhaitez que les barres de défilement soient toujours présentes.

<div style="width:100px;height:100px;overflow:scroll;"> 

Si vous souhaitez que les barres de défilement n'apparaissent que lorsque le contenu est supérieur au div.

<div style="width:100px;height:100px;overflow:auto;">