[{"data":1,"prerenderedAt":748},["ShallowReactive",2],{"navigation_docs_en":3,"-en-tips-tricks-scrollable-content":314,"-en-tips-tricks-scrollable-content-surround":743},[4,40,116,124,225,253,266],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/en/getting-started","en/1.getting-started",[10,15,20,25,30,35],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/en/getting-started/introduction","en/1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Create a Project","/en/getting-started/create-project","en/1.getting-started/2.create-project","i-lucide-file-plus-2",{"title":21,"path":22,"stem":23,"icon":24},"Studio Interface","/en/getting-started/studio-ui","en/1.getting-started/3.studio-ui","i-lucide-layout-panel-left",{"title":26,"path":27,"stem":28,"icon":29},"Interactive Content","/en/getting-started/create-interactive-content","en/1.getting-started/4.create-interactive-content","i-lucide-fingerprint",{"title":31,"path":32,"stem":33,"icon":34},"Digital Signage","/en/getting-started/create-signage-content","en/1.getting-started/5.create-signage-content","i-lucide-images",{"title":36,"path":37,"stem":38,"icon":39},"Publish and Broadcast","/en/getting-started/publish","en/1.getting-started/6.publish","i-lucide-rss",{"title":41,"path":42,"stem":43,"children":44,"page":6},"Touchify Studio","/en/touchify-studio","en/2.touchify-studio",[45,49,74,97],{"title":11,"path":46,"stem":47,"icon":48},"/en/touchify-studio/introduction","en/2.touchify-studio/1.introduction","i-lucide-home",{"title":50,"path":51,"stem":52,"children":53,"page":6},"Elements","/en/touchify-studio/elements","en/2.touchify-studio/2.elements",[54,59,64,69],{"title":55,"path":56,"stem":57,"icon":58},"Texts","/en/touchify-studio/elements/texts","en/2.touchify-studio/2.elements/1.texts","i-lucide-case-sensitive",{"title":60,"path":61,"stem":62,"icon":63},"Media","/en/touchify-studio/elements/media","en/2.touchify-studio/2.elements/2.media","i-lucide-image-play",{"title":65,"path":66,"stem":67,"icon":68},"Background and Borders","/en/touchify-studio/elements/background-and-borders","en/2.touchify-studio/2.elements/3.background-and-borders","i-lucide-square-dashed-top-solid",{"title":70,"path":71,"stem":72,"icon":73},"Shapes","/en/touchify-studio/elements/drawing","en/2.touchify-studio/2.elements/4.drawing","i-lucide-sparkle",{"title":75,"path":76,"stem":77,"children":78,"page":6},"Interactions","/en/touchify-studio/interactions","en/2.touchify-studio/3.interactions",[79,82,87,92],{"title":11,"path":80,"stem":81,"icon":29},"/en/touchify-studio/interactions/introduction","en/2.touchify-studio/3.interactions/1.introduction",{"title":83,"path":84,"stem":85,"icon":86},"Navigation","/en/touchify-studio/interactions/navigation","en/2.touchify-studio/3.interactions/2.navigation","i-lucide-navigation",{"title":88,"path":89,"stem":90,"icon":91},"Manipulation","/en/touchify-studio/interactions/manipulation","en/2.touchify-studio/3.interactions/3.manipulation","i-lucide-fullscreen",{"title":93,"path":94,"stem":95,"icon":96},"Windows","/en/touchify-studio/interactions/dialogs","en/2.touchify-studio/3.interactions/4.dialogs","i-lucide-message-square-text",{"title":98,"path":99,"stem":100,"children":101,"page":6},"Animations","/en/touchify-studio/animations","en/2.touchify-studio/4.animations",[102,106,111],{"title":11,"path":103,"stem":104,"icon":105},"/en/touchify-studio/animations/introduction","en/2.touchify-studio/4.animations/1.introduction","i-lucide-bring-to-front",{"title":107,"path":108,"stem":109,"icon":110},"Customization","/en/touchify-studio/animations/customize","en/2.touchify-studio/4.animations/2.customize","i-lucide-columns-3-cog",{"title":112,"path":113,"stem":114,"icon":115},"Storyboards","/en/touchify-studio/animations/storyboards","en/2.touchify-studio/4.animations/3.storyboards","i-lucide-clipboard-clock",{"title":117,"path":118,"stem":119,"children":120,"page":6},"Touchify Publisher","/en/touchify-publisher","en/3.touchify-publisher",[121],{"title":11,"path":122,"stem":123,"icon":14},"/en/touchify-publisher/introduction","en/3.touchify-publisher/1.introduction",{"title":125,"path":126,"stem":127,"children":128,"page":6},"Touchify Player","/en/touchify-player","en/4.touchify-player",[129,132,156,215],{"title":11,"path":130,"stem":131,"icon":14},"/en/touchify-player/introduction","en/4.touchify-player/1.introduction",{"title":5,"path":133,"stem":134,"children":135,"page":6},"/en/touchify-player/getting-started","en/4.touchify-player/2.getting-started",[136,141,146,151],{"title":137,"path":138,"stem":139,"icon":140},"The Application","/en/touchify-player/getting-started/application","en/4.touchify-player/2.getting-started/1.application","i-lucide-app-window-mac",{"title":142,"path":143,"stem":144,"icon":145},"Connect","/en/touchify-player/getting-started/connection","en/4.touchify-player/2.getting-started/2.connection","i-lucide-key-round",{"title":147,"path":148,"stem":149,"icon":150},"Home Screen","/en/touchify-player/getting-started/home-screen","en/4.touchify-player/2.getting-started/3.home-screen","i-lucide-grid-2x2",{"title":152,"path":153,"stem":154,"icon":155},"Options","/en/touchify-player/getting-started/settings","en/4.touchify-player/2.getting-started/4.settings","i-lucide-settings",{"title":157,"path":158,"stem":159,"children":160,"page":6},"Installation","/en/touchify-player/installation","en/4.touchify-player/3.installation",[161,166,170,175,180,185,190,195,200,205,210],{"title":162,"path":163,"stem":164,"icon":165},"The Guides","/en/touchify-player/installation/introduction","en/4.touchify-player/3.installation/01.introduction","i-lucide-badge-question-mark",{"title":93,"path":167,"stem":168,"icon":169},"/en/touchify-player/installation/windows","en/4.touchify-player/3.installation/02.windows","i-cib-windows",{"title":171,"path":172,"stem":173,"icon":174},"Android","/en/touchify-player/installation/android","en/4.touchify-player/3.installation/03.android","i-cib-android",{"title":176,"path":177,"stem":178,"icon":179},"ChromeOS","/en/touchify-player/installation/chromeos","en/4.touchify-player/3.installation/04.chromeos","i-cib-google-chrome",{"title":181,"path":182,"stem":183,"icon":184},"Tizen","/en/touchify-player/installation/tizen","en/4.touchify-player/3.installation/05.tizen","i-cib-samsung",{"title":186,"path":187,"stem":188,"icon":189},"BrightSign","/en/touchify-player/installation/brightsign","en/4.touchify-player/3.installation/06.brightsign","i-lucide-cpu",{"title":191,"path":192,"stem":193,"icon":194},"Linux","/en/touchify-player/installation/linux","en/4.touchify-player/3.installation/07.linux","i-cib-linux",{"title":196,"path":197,"stem":198,"icon":199},"macOS","/en/touchify-player/installation/macos","en/4.touchify-player/3.installation/08.macos","i-cib-apple",{"title":201,"path":202,"stem":203,"icon":204},"iOS","/en/touchify-player/installation/ios","en/4.touchify-player/3.installation/09.ios","i-cib-app-store-ios",{"title":206,"path":207,"stem":208,"icon":209},"Android TV","/en/touchify-player/installation/android-tv","en/4.touchify-player/3.installation/10.android-tv","i-lucide-tv",{"title":211,"path":212,"stem":213,"icon":214},"LG webOS","/en/touchify-player/installation/webos","en/4.touchify-player/3.installation/11.webos","i-cbi-lg",{"title":216,"path":217,"stem":218,"children":219,"page":6},"Troubleshooting","/en/touchify-player/troubleshooting","en/4.touchify-player/4.troubleshooting",[220],{"title":221,"path":222,"stem":223,"icon":224},"Kiosk mode unlocking","/en/touchify-player/troubleshooting/kiosk","en/4.touchify-player/4.troubleshooting/1.kiosk","i-lucide-bug",{"title":226,"path":227,"stem":228,"children":229,"page":6},"Tips & Tricks","/en/tips-tricks","en/5.tips-tricks",[230,233,238,243,248],{"title":11,"path":231,"stem":232,"icon":14},"/en/tips-tricks/introduction","en/5.tips-tricks/1.introduction",{"title":234,"path":235,"stem":236,"icon":237},"Keyboard Shortcuts","/en/tips-tricks/shortcuts","en/5.tips-tricks/2.shortcuts","i-lucide-keyboard",{"title":239,"path":240,"stem":241,"icon":242},"Optimize a Video","/en/tips-tricks/optimize-video","en/5.tips-tricks/3.optimize-video","i-lucide-file-play",{"title":244,"path":245,"stem":246,"icon":247},"Interactive Image","/en/tips-tricks/interactive-image","en/5.tips-tricks/4.interactive-image","i-lucide-image-plus",{"title":249,"path":250,"stem":251,"icon":252},"Scrollable area","/en/tips-tricks/scrollable-content","en/5.tips-tricks/5.scrollable-content","i-lucide-gallery-vertical",{"title":254,"path":255,"stem":256,"children":257,"page":6},"Guides and Advice","/en/guides","en/6.guides",[258,261],{"title":11,"path":259,"stem":260,"icon":14},"/en/guides/introduction","en/6.guides/1.introduction",{"title":262,"path":263,"stem":264,"icon":265},"Stripe Terminal","/en/guides/stripe-terminal","en/6.guides/2.stripe-terminal","i-lucide-credit-card",{"title":267,"path":268,"stem":269,"children":270,"page":6},"Applications","/en/applications","en/7.applications",[271,274],{"title":11,"path":272,"stem":273,"icon":14},"/en/applications/introduction","en/7.applications/1.introduction",{"title":275,"path":276,"stem":277,"children":278,"page":6},"Rooms Manager","/en/applications/rooms-manager","en/7.applications/2.rooms-manager",[279,284,289,294,299,304,309],{"title":280,"path":281,"stem":282,"icon":283},"Login","/en/applications/rooms-manager/login","en/7.applications/2.rooms-manager/1.login","i-lucide-rectangle-ellipsis",{"title":285,"path":286,"stem":287,"icon":288},"Sites","/en/applications/rooms-manager/sites","en/7.applications/2.rooms-manager/2.sites","i-lucide-hotel",{"title":290,"path":291,"stem":292,"icon":293},"Meeting rooms","/en/applications/rooms-manager/meeting-rooms","en/7.applications/2.rooms-manager/3.meeting-rooms","i-lucide-ratio",{"title":295,"path":296,"stem":297,"icon":298},"Users","/en/applications/rooms-manager/users","en/7.applications/2.rooms-manager/4.users","i-lucide-users",{"title":300,"path":301,"stem":302,"icon":303},"Booking","/en/applications/rooms-manager/booking","en/7.applications/2.rooms-manager/5.booking","i-lucide-ticket-check",{"title":305,"path":306,"stem":307,"icon":308},"Tablet Booking","/en/applications/rooms-manager/tablet-booking","en/7.applications/2.rooms-manager/6.tablet-booking","i-lucide-tablet",{"title":310,"path":311,"stem":312,"icon":313},"Mobile Booking","/en/applications/rooms-manager/mobile-booking","en/7.applications/2.rooms-manager/7.mobile-booking","i-lucide-smartphone",{"id":315,"title":316,"body":317,"description":734,"extension":735,"links":736,"meta":737,"navigation":738,"path":250,"seo":739,"stem":251,"__hash__":742},"docs_en/en/5.tips-tricks/5.scrollable-content.md","Tutorial: Scrollable area",{"type":318,"value":319,"toc":720},"minimark",[320,325,339,392,396,401,404,418,431,442,449,456,466,474,488,492,503,509,516,527,545,549,560,575,581,621,625,632,636,643,647,651,663,667,682,685,690,694,699,701,706,708,713],[321,322,324],"h2",{"id":323},"elements-compatible-with-scrolling","Elements compatible with scrolling",[326,327,328,329,333,334,338],"p",{},"This functionality can be applied to several types of elements. It is activated in the ",[330,331,332],"strong",{},"Element Customization"," tab ",[335,336,337],"em",{},"(target icon)"," to the right of the workspace:",[340,341,342,357,367,383],"ul",{},[343,344,345,348,349,352,353,356],"li",{},[330,346,347],{},"Text",": check the ",[335,350,351],{},"Allow scrolling"," option in the ",[335,354,355],{},"Scrolling Options"," window",[343,358,359,348,362,352,364,356],{},[330,360,361],{},"Menu",[335,363,351],{},[335,365,366],{},"Display Options",[343,368,369,372,373,352,376,379,380,356],{},[330,370,371],{},"Custom component",": choose the ",[335,374,375],{},"Scrolling",[335,377,378],{},"Display mode"," menu of the ",[335,381,382],{},"Component",[343,384,385,348,388,352,390,356],{},[330,386,387],{},"Text & custom windows",[335,389,351],{},[335,391,355],{},[321,393,395],{"id":394},"creating-a-scrolling-custom-component","Creating a scrolling custom component",[397,398,400],"h3",{"id":399},"step-1-create-the-content","Step 1: Create the content",[326,402,403],{},"Add to your page the elements that will appear in the area.",[326,405,406,407,333,410,413,414,417],{},"To choose an image, expand the ",[330,408,409],{},"\"Gallery\"",[335,411,412],{},"(image icon)"," in the left sidebar then select your desired image.\nTo insert it, click the ",[330,415,416],{},"\"+\""," button or drag it directly into the page.",[326,419,420,421,424,425,430],{},"To add other types of media (videos, pdfs...) expand ",[330,422,423],{},"the corresponding tab"," in the left sidebar. Insert your media the same way as an image.\nDon't forget to ",[426,427,429],"a",{"href":428},"../touchify-studio/elements/media","import your media into the gallery"," beforehand.",[326,432,433,434,437,438,441],{},"Customize the size and position of your image in the ",[330,435,436],{},"\"Options\""," window ",[335,439,440],{},"(crosshair icon)",", to the right of the workspace.",[326,443,444],{},[445,446],"img",{"alt":447,"src":448},"File explorer in Touchify Studio","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-explorer.webp",[326,450,451,452,455],{},"To add text, click the ",[330,453,454],{},"\"Text\""," button in the insertion menu.\nChoose the style you want to apply or draw the block directly on the page.",[326,457,458,459,462,463,465],{},"Customize the element in the ",[330,460,461],{},"\"Element Customization\""," tabs ",[335,464,440],{}," to the right of the workspace.\nModify the text and block style as you wish: change typography, size, text color, add a colored background to the block...",[467,468],"nuxt-img",{"alt":469,"src":470,"provider":471,"className":472},"Creating a Text button in Touchify Studio","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-bouton-texte.webp","none",[473],"w-full",[475,476,477,478,482,483,487],"tip",{},"Discover the full range of ",[426,479,481],{"href":480},"../touchify-studio/elements/texts","text"," and ",[426,484,486],{"href":485},"../touchify-studio/elements/background-and-borders","block"," tools in the dedicated articles.",[397,489,491],{"id":490},"step-2-transform-into-component","Step 2: Transform into component",[326,493,494,495,498,499,502],{},"First, make sure that ",[330,496,497],{},"all elements of your future area"," are gathered on your page, arranged in the desired location.\n",[330,500,501],{},"Some elements must overflow",", so that the scrolling area is visible in its entirety; leave in the page the elements that will appear as priority.",[326,504,505],{},[445,506],{"alt":507,"src":508},"Example of content ready to be converted into scrolling component","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-exemple.webp",[326,510,511,512,515],{},"Select all your elements then right-click: choose the ",[330,513,514],{},"\"Transform into component\""," option in the window.",[326,517,518,519,522,523,526],{},"Name your component and modify its parameters in the ",[330,520,521],{},"configuration window",". Dimensions and position are entered automatically, you don't need to modify them.\nOnce configuration is complete, click the ",[330,524,525],{},"\"Validate\""," button.",[528,529,536,537,536,541],"div",{"className":530},[531,532,533,534,535],"mt-4","grid","sm:grid-cols-2","gap-4","max-w-full","\n  ",[445,538],{"src":539,"alt":540},"/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-transformer.webp","Action to transform a selection into component",[445,542],{"src":543,"alt":544},"/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-formulaire.webp","Component creation form",[397,546,548],{"id":547},"step-3-configure-the-component","Step 3: Configure the component",[326,550,551,552,555,556,559],{},"The component is automatically ",[330,553,554],{},"inserted in the page, at the location where it was created",".\nAdjust its size to fit the page dimensions: surplus elements must now be invisible, ",[330,557,558],{},"hidden in the component block",".",[326,561,562,563,333,565,567,568,571,572,574],{},"To allow scrolling, select the component then access the windows in the ",[330,564,461],{},[335,566,440],{}," in the right sidebar:\nin the ",[330,569,570],{},"\"Component\""," window, select the ",[335,573,375],{}," display mode.",[326,576,577],{},[445,578],{"alt":579,"src":580},"Configure scrolling mode on a component","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-composant-config.webp",[582,583,584,585,588,589,592,593,596,598,599,602,603,588,605,608,609,611,613,614,588,617,620],"note",{},"You can modify your component at any time: select it then click the ",[330,586,587],{},"\"Edit\""," button ",[335,590,591],{},"(pencil icon)"," in the customization window, to the right of the workspace.\n",[594,595],"br",{},[594,597],{},"\nYou can also access the component management space: in the bottom menu of the ",[330,600,601],{},"\"Pages\""," window, to the left of the workspace, click the ",[330,604,570],{},[335,606,607],{},"(C icon)",".\nSelect your component to modify it.\n",[594,610],{},[594,612],{},"\nTo return to the project pages, click the ",[330,615,616],{},"\"Project pages\"",[335,618,619],{},"(page icon)"," in the same menu.",[397,622,624],{"id":623},"step-4-preview","Step 4: Preview",[326,626,627,628,631],{},"To preview the project, click the ",[330,629,630],{},"\"Preview\""," button at the top left of the workspace. This mode will allow you to visualize and test the scrolling area you just created.",[467,633],{"alt":634,"src":635},"Preview button in Touchify Studio","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-preview.webp",[326,637,638,639,642],{},"To exit the mode, click the ",[330,640,641],{},"\"Close\""," button at the top right of the window.",[467,644],{"alt":645,"src":646},"Preview close button in Touchify Studio","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-preview-fermer.webp",[321,648,650],{"id":649},"automatic-scrolling-options","Automatic scrolling options",[326,652,653,654,333,656,658,659,662],{},"While classic scrolling is triggered by interaction, automatic scrolling plays independently.\nTo activate this option, click the ",[330,655,461],{},[335,657,337],{}," in the right menu then expand the ",[330,660,661],{},"\"Scrolling Options\""," window.",[467,664],{"alt":650,"src":665,"width":666},"/5-tips-tricks/5-scrollable-content/fr-tips-scroll-defilement-auto.webp",450,[668,669,670,673,676,679],"ol",{},[343,671,672],{},"Choose the scrolling speed",[343,674,675],{},"Set the scrolling activation delay",[343,677,678],{},"Modify the scrolling type: return to beginning, reverse scrolling, continuous scrolling, entrance and exit",[343,680,681],{},"Visualize the scrolling you just configured",[582,683,684],{},"Automatic scrolling can be applied to all elements mentioned at the beginning of the article, as well as to web browsers",[467,686],{"alt":687,"src":688,"provider":471,"className":689},"Demonstration of automatic scrolling in Touchify","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-demo.webp",[473],[321,691,693],{"id":692},"scrolling-examples","Scrolling examples:",[467,695],{"alt":696,"src":697,"provider":471,"className":698},"Example of scrolling bird content","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-exemple-oiseaux.webp",[473],[594,700],{},[467,702],{"alt":703,"src":704,"provider":471,"width":705},"Example of scrolling menu content","/5-tips-tricks/5-scrollable-content/fr-tips-scroll-exemple-menu.webp",400,[594,707],{},[467,709],{"alt":710,"src":711,"provider":471,"className":712},"Example of scrolling panorama content","/5-tips-tricks/3-interactive-image/fr-tips-image-exemple-panorama.webp",[473],[582,714,715,716],{},"Learn how to create an interactive image in ",[426,717,719],{"href":718},"interactive-image","the dedicated article",{"title":721,"searchDepth":722,"depth":722,"links":723},"",2,[724,725,732,733],{"id":323,"depth":722,"text":324},{"id":394,"depth":722,"text":395,"children":726},[727,729,730,731],{"id":399,"depth":728,"text":400},3,{"id":490,"depth":728,"text":491},{"id":547,"depth":728,"text":548},{"id":623,"depth":728,"text":624},{"id":649,"depth":722,"text":650},{"id":692,"depth":722,"text":693},"Learn how to create scrolling content.","md",null,{},{"title":249,"icon":252},{"title":740,"description":741},"How to create a scrollable area with Touchify","Learn how to create a scrollable area with Touchify Studio to make your content more dynamic.","-iUK1SD8McrtkHYndlghGKs-OvXyVv7odqtyrgt5Z0A",[744,746],{"title":244,"path":245,"stem":246,"description":745,"icon":247,"children":-1},"Design buttons and windows to enhance your image.",{"title":11,"path":259,"stem":260,"description":747,"icon":14,"children":-1},"Find articles to help you design high-quality interactive projects.",1761669903812]