{"id":124615,"date":"2018-11-30T22:56:47","date_gmt":"2018-11-30T21:56:47","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/scrolling-content\/"},"modified":"2025-02-03T16:45:11","modified_gmt":"2025-02-03T15:45:11","slug":"scrolling-content","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/desplazamiento-contenido","title":{"rendered":"Desplazamiento del contenido"},"content":{"rendered":"<p>En este art\u00edculo, aprender\u00e1s a a\u00f1adir p\u00e1ginas y \u00e1reas desplazables en tus proyectos.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example-1.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" scrolling-preview.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example-1.png\" alt=\"Ejemplo de contenido desplazable\">Ejemplo de contenido desplazable<\/video><\/p>\n<h3>Desplazamiento de p\u00e1gina<\/h3>\n<p>Arrastra un elemento hacia la parte inferior del lienzo. Al llegar al borde, el elemento seguir\u00e1 movi\u00e9ndose y la altura del lienzo se alargar\u00e1 autom\u00e1ticamente. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" scroll-screen.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Pantalla de desplazamiento<\/video><br \/>\nTambi\u00e9n puedes escribir la posici\u00f3n vertical de un elemento en la paleta Propiedades. Toca el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto y ver c\u00f3mo puedes desplazarte por la pantalla. <\/p>\n<div><strong>Nota:<\/strong> Aseg\u00farate de que la opci\u00f3n \u00abBloquear desplazamiento vertical\u00bb no est\u00e1 marcada en la paleta Propiedades<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43284\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/07\/Scroll-not-locked.png\" alt=\"Aseg\u00farate de que el desplazamiento horizontal y vertical no est\u00e1 bloqueado\" width=\"2048\" height=\"1188\"><\/p>\n<h3>Contenedor scroll<\/h3>\n<ol>\n<li>A\u00f1ade un Panel Din\u00e1mico al Lienzo. Puedes encontrarlo en la Barra de Herramientas, en \u00abContenido din\u00e1mico\u00bb o pulsando la tecla <kbd>D<\/kbd>  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43571\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/07\/Dynamic-Panel-For-Scroll.png\" alt=\"Coloca un panel din\u00e1mico en el lienzo\" width=\"1117\" height=\"630\"><\/li>\n<li>Mant\u00e9n pulsada <kbd>la tecla Comando<\/kbd> (en Mac) o <kbd>Control<\/kbd> (en Windows) y arrastra elementos al panel. Ver\u00e1s un tinte azul cuando arrastres un elemento dentro. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43581\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/07\/Drag-elements-into-panel.png\" alt=\"Mant\u00e9n pulsado comando en Mac o control en Windows y arrastra los elementos al panel din\u00e1mico\" width=\"1542\" height=\"895\"><\/li>\n<li><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/resize-dynamic-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" resize-dynamic-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\">Redimensiona<\/video> la anchura o la altura del panel hasta que algunos elementos queden cortados.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/resize-dynamic-panel.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" resize-dynamic-panel.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/resize-dynamic-panel.png\" alt=\"Cambiar el tama\u00f1o del panel din\u00e1mico\">Redimensionar panel din\u00e1mico<\/video><\/li>\n<li>Ve a la paleta Propiedades y cambia la opci\u00f3n &#8216;Hor. (horizontal) Desplazamiento&#8217; a &#8216;Siempre&#8217; para crear un \u00e1rea desplazable horizontalmente.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43573\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/07\/Always-scroll-horizontal.png\" alt=\"Selecciona Desplazar siempre para crear un contenedor desplazable\" width=\"1048\" height=\"617\">  Cambia la opci\u00f3n &#8216;Ver. (vertical) Desplazamiento&#8217; a &#8216;Siempre&#8217; para crear un \u00e1rea desplazable verticalmente.<\/li>\n<li>Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Comprueba c\u00f3mo puedes desplazarte dentro del \u00e1rea del panel, pero el resto del Lienzo no se mueve.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example-1.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" panel-example-1.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/panel-example-1.png\" alt=\"Desplazamiento horizontal\">Desplazamiento horizontal<\/video> <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo, aprender\u00e1s a a\u00f1adir p\u00e1ginas y \u00e1reas desplazables en tus proyectos. Ejemplo de contenido desplazable Desplazamiento de p\u00e1gina Arrastra un elemento hacia la parte&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8421],"tags":[],"class_list":["post-124615","post","type-post","status-publish","format-standard","hentry","category-formacion","category-interacciones-web-y-moviles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124615"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124615"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124615\/revisions"}],"predecessor-version":[{"id":126235,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124615\/revisions\/126235"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}