{"id":124616,"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:44:27","modified_gmt":"2025-02-03T15:44:27","slug":"scrolling-content","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/contenu-defilant","title":{"rendered":"Contenu d\u00e9filant"},"content":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 ajouter des pages et des zones d\u00e9filables dans vos projets.<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=\"Exemple de contenu d\u00e9filant\">Exemple de contenu d\u00e9filant<\/video><\/p>\n<h3>D\u00e9filement des pages<\/h3>\n<p>Faites glisser un \u00e9l\u00e9ment vers le bas du canevas. Lorsque vous atteignez le bord, l&rsquo;\u00e9l\u00e9ment continue \u00e0 se d\u00e9placer et la hauteur du canevas s&rsquo;allonge automatiquement. <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=\"\">\u00c9cran de d\u00e9filement<\/video><br \/>\nVous pouvez \u00e9galement saisir la position verticale d&rsquo;un \u00e9l\u00e9ment dans la palette Propri\u00e9t\u00e9s. Appuyez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet et voir comment vous pouvez faire d\u00e9filer l&rsquo;\u00e9cran. <\/p>\n<div><strong>Remarque :<\/strong> assurez-vous que la case \u00ab\u00a0Verrouiller le d\u00e9filement vertical\u00a0\u00bb n&rsquo;est pas coch\u00e9e dans la palette des propri\u00e9t\u00e9s.<\/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=\"Assurez-vous que le d\u00e9filement horizontal et vertical n'est pas bloqu\u00e9.\" width=\"2048\" height=\"1188\"><\/p>\n<h3>D\u00e9filement des conteneurs<\/h3>\n<ol>\n<li>Ajoutez un panneau dynamique au canevas. Vous pouvez le trouver dans la barre d&rsquo;outils sous \u00ab\u00a0Contenu dynamique\u00a0\u00bb ou en appuyant sur la touche <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=\"Placez un panneau dynamique sur le canevas\" width=\"1117\" height=\"630\"><\/li>\n<li>Maintenez la <kbd>touche Commande<\/kbd> (sur Mac) ou <kbd>Contr\u00f4le<\/kbd> (sur Windows) enfonc\u00e9e et faites glisser les \u00e9l\u00e9ments dans le panneau. Vous verrez une teinte bleue lorsque vous faites glisser un \u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur. <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=\"Maintenez la touche Commande sur Mac ou Contr\u00f4le sur Windows et faites glisser les \u00e9l\u00e9ments dans le panneau dynamique.\" width=\"1542\" height=\"895\"><\/li>\n<li>Redimensionnez la largeur ou la hauteur du panneau jusqu&rsquo;\u00e0 ce que certains \u00e9l\u00e9ments soient coup\u00e9s.<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=\"Redimensionner le panneau dynamique\">Redimensionner le panneau dynamique<\/video><\/li>\n<li>Passez \u00e0 la palette Propri\u00e9t\u00e9s et modifiez le param\u00e8tre \u00ab\u00a0Hor. (horizontal) Scroll\u00a0\u00bb sur \u00ab\u00a0Always\u00a0\u00bb pour cr\u00e9er une zone de d\u00e9filement horizontal.<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=\"S\u00e9lectionnez le d\u00e9filement permanent pour cr\u00e9er un conteneur \u00e0 d\u00e9filement.\" width=\"1048\" height=\"617\">  Modifiez la valeur de l&rsquo;option &lsquo;Ver. (vertical) Scroll\u00a0\u00bb sur \u00ab\u00a0Always\u00a0\u00bb pour cr\u00e9er une zone de d\u00e9filement vertical.<\/li>\n<li>Appuyez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Regardez comment vous pouvez faire d\u00e9filer la zone du panneau, sans que le reste du canevas ne bouge.<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=\"D\u00e9filement horizontal\">D\u00e9filement horizontal<\/video> <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 ajouter des pages et des zones d\u00e9filables dans vos projets. Exemple de contenu d\u00e9filant D\u00e9filement des pages Faites glisser un&#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":[8416,8420],"tags":[],"class_list":["post-124616","post","type-post","status-publish","format-standard","hentry","category-formation","category-interactions-web-et-mobiles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124616"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124616"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124616\/revisions"}],"predecessor-version":[{"id":126147,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124616\/revisions\/126147"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}