{"id":128997,"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-13T17:52:53","modified_gmt":"2025-02-13T16:52:53","slug":"scrolling-content","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/inhalt-scrollen","title":{"rendered":"Inhalt scrollen"},"content":{"rendered":"<p>In diesem Artikel erfahren Sie, wie Sie bl\u00e4tterbare Seiten und Bereiche in Ihre Projekte einf\u00fcgen k\u00f6nnen.<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=\"Beispiel f\u00fcr einen scrollenden Inhalt\">Beispiel f\u00fcr einen scrollenden Inhalt<\/video><\/p>\n<h3>Seite scrollen<\/h3>\n<p>Ziehen Sie ein Element in Richtung des unteren Randes des Canvas. Wenn Sie den Rand erreichen, bewegt sich das Element weiter und die H\u00f6he des Canvas wird automatisch verl\u00e4ngert.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/scroll-screen.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" scroll-screen.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/scroll-screen.png\" alt=\"Bildschirm scrollen\">Bildschirm scrollen<\/video><br \/>\nSie k\u00f6nnen die vertikale Position eines Elements auch in die Eigenschaftenpalette eingeben.<\/p>\n<p>Tippen Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihr Projekt zu simulieren und zu sehen, wie Sie auf dem Bildschirm nach unten scrollen k\u00f6nnen.<\/p>\n<div><strong>Hinweis:<\/strong> Vergewissern Sie sich, dass &#8222;Vertikalen Bildlauf sperren&#8220; in der Palette Eigenschaften nicht aktiviert ist.<\/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=\"Stellen Sie sicher, dass der horizontale und vertikale Bildlauf nicht gesperrt ist.\" width=\"2048\" height=\"1188\"><\/p>\n<h3>Container-Schriftrolle<\/h3>\n<ol>\n<li>F\u00fcgen Sie ein dynamisches Panel zum Canvas hinzu. Sie finden es in der Symbolleiste unter &#8218;Dynamischer Inhalt&#8216; oder indem Sie die Taste <kbd>D<\/kbd> dr\u00fccken <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=\"Platzieren Sie ein dynamisches Panel auf der Leinwand\" width=\"1117\" height=\"630\"><\/li>\n<li>Halten Sie die <kbd>Befehlstaste<\/kbd> (Mac) oder die <kbd>Strg-Taste<\/kbd> (Windows) gedr\u00fcckt und ziehen Sie Elemente in das Panel. Sie sehen eine blaue F\u00e4rbung, wenn Sie ein Element hineinziehen. <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=\"Halten Sie die Befehlstaste (Mac) bzw. die Strg-Taste (Windows) gedr\u00fcckt und ziehen Sie Elemente in das dynamische Bedienfeld.\" width=\"1542\" height=\"895\"><\/li>\n<li>\u00c4ndern Sie die Breite oder H\u00f6he des Panels, bis einige Elemente abgeschnitten sind.<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=\"Gr\u00f6\u00dfe des dynamischen Panels \u00e4ndern\">Dynamisches Panel skalieren<\/video><\/li>\n<li>Sehen Sie sich die Palette Eigenschaften an und \u00e4ndern Sie die Option &#8218;Hor. (horizontales) Scrollen&#8216; auf &#8218;Immer&#8216;, um einen horizontal scrollbaren Bereich zu erstellen.<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=\"W\u00e4hlen Sie immer scrollen, um einen scrollenden Container zu erstellen\" width=\"1048\" height=\"617\">  \u00c4ndern Sie die Option &#8218;Ver. (vertikales) Scrollen&#8216; auf &#8218;Immer&#8216;, um einen vertikal scrollbaren Bereich zu erstellen.<\/li>\n<li>Tippen Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihr Projekt zu simulieren. Sehen Sie sich an, wie Sie innerhalb des Bereichs des Panels scrollen k\u00f6nnen, ohne dass sich der Rest des Canvas bewegt.<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=\"Horizontal bl\u00e4ttern\">Horizontales Scrollen<\/video> <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Artikel erfahren Sie, wie Sie bl\u00e4tterbare Seiten und Bereiche in Ihre Projekte einf\u00fcgen k\u00f6nnen. Beispiel f\u00fcr einen scrollenden Inhalt Seite scrollen Ziehen Sie ein&#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":[8554,8556],"tags":[],"class_list":["post-128997","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-web-mobile-interaktionen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128997"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=128997"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128997\/revisions"}],"predecessor-version":[{"id":129204,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/128997\/revisions\/129204"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=128997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=128997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=128997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}