Quiero crear algo como un pequeño feed en un pequeño cuadro (div) en la esquina de mi sitio web. ¿Cómo puedo hacerlo? ¿Cómo puedo hacer esta pequeña caja que puede caber en muchos divs y hacerla desplazable?
.feed{ height:30%; overflow-y: scroll; width: 200px; position: fixed; bottom:0px; left:0px; } <!DOCTYPE html> <html> <title>HTML Tutorial</title> <body> <div class="feed"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>El punto es usar overflow: scroll para un estilo div grande. Se desplaza horizontal y verticalmente. Si solo desea desplazarse horizontalmente, use overflow-y:scroll . Y si solo desea desplazarse verticalmente, use overflow-y:scroll . Así que prueba esto:
.big-div{ height: 100px; overflow: scroll; } <div class="big-div"> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> <div>List item</div> </div>Usar overflow: scroll . Es posible que también desee ocultar la barra de desplazamiento, puede hacerlo de la siguiente manera:
.container { overflow: hidden; height: 100px; width: 100px; } .scroll-container { box-sizing: border-box; height: 100%; width: calc(100% + 50px); overflow-y: scroll; } <div class="container"> <div class="scroll-container"> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> <div> feed </div> </div> </div>