{"id":137276,"date":"2024-10-15T15:13:51","date_gmt":"2024-10-15T09:43:51","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137276"},"modified":"2024-10-17T15:07:21","modified_gmt":"2024-10-17T09:37:21","slug":"scrolling-panels-and-custom-scrollbars-advanced-techniques","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/","title":{"rendered":"Scrolling Panels and Custom Scrollbars | Advanced Techniques"},"content":{"rendered":"\n<p>Scrolling panels and custom scrollbars can enhance the user experience, especially in responsive designs where space is limited.<\/p>\n\n\n\n<p>Scrolling Panels<\/p>\n\n\n\n<p>Scrolling panels allow users to view content that exceeds the available viewport height. You can achieve this using CSS properties like overflow, overflow-x, and overflow-y.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<p>&lt;div class=&#8221;scrollable-panel&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.scrollable-panel {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; height: 300px; \/* Adjust the height as needed *\/<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; overflow: auto;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Custom Scrollbars<\/p>\n\n\n\n<p>While browsers provide default scrollbars, you can customize their appearance using CSS. However, browser compatibility can be a challenge.<\/p>\n\n\n\n<p><strong>Example (using a CSS framework or library):<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<p>&lt;div class=&#8221;custom-scrollbar&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>\/* Using a CSS framework like Bootstrap *\/<\/p>\n\n\n\n<p>.custom-scrollbar {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; height: 300px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; overflow-y: scroll;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.custom-scrollbar::-webkit-scrollbar {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; width: 10px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.custom-scrollbar::-webkit-scrollbar-thumb {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; background-color: #ccc;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Note:<\/strong> Browser compatibility for custom scrollbars can vary. You might need to use JavaScript or a third-party library for more reliable customization.<\/p>\n\n\n\n<p>Responsive Design Considerations<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Viewport Height:<\/strong> Adjust the height of scrolling panels based on the viewport height to ensure they are always visible.<\/li>\n\n\n\n<li><strong>Media Queries:<\/strong> Use media queries to adjust the height of scrolling panels and the appearance of custom scrollbars for different screen sizes.<\/li>\n\n\n\n<li><strong>Accessibility:<\/strong> Ensure that scrolling panels and custom scrollbars are accessible to users with disabilities. Provide keyboard navigation and clear visual indicators.<\/li>\n\n\n\n<li><strong>Performance:<\/strong> Be mindful of performance when using custom scrollbars, as complex styles can impact page load times.<\/li>\n<\/ul>\n\n\n\n<p>Additional Tips<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Infinite Scrolling:<\/strong> Implement infinite scrolling to load more content as the user scrolls to the bottom of the panel.<\/li>\n\n\n\n<li><strong>Horizontal Scrolling:<\/strong> Use overflow-x: auto to enable horizontal scrolling for content that exceeds the viewport width.<\/li>\n\n\n\n<li><strong>Touch Optimization:<\/strong> Ensure that scrolling panels and custom scrollbars work smoothly on touch devices.<\/li>\n\n\n\n<li><strong>Third-Party Libraries:<\/strong> Consider using third-party libraries like perfect-scrollbar or simplebar for more advanced customization and cross-browser compatibility.<\/li>\n<\/ul>\n\n\n\n<p>By effectively utilizing scrolling panels and custom scrollbars, you can create a more engaging and user-friendly experience in your responsive web designs.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/truncating-text-in-css-advanced-techniques\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-scroll-snap-advanced-techniques\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scrolling panels and custom scrollbars can enhance the user experience, especially in responsive designs where space is limited. Scrolling Panels Scrolling panels allow users to view content that exceeds the available viewport height. You can achieve this using CSS properties like overflow, overflow-x, and overflow-y. Example: HTML &lt;div class=&#8221;scrollable-panel&#8221;&gt; &nbsp;&nbsp;&nbsp; &lt;\/div&gt; CSS .scrollable-panel { &nbsp;&nbsp;&nbsp;&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-137276","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Scrolling Panels and Custom Scrollbars | Advanced Techniques - Tutorial<\/title>\n<meta name=\"description\" content=\"Prepare effectively for the Certified Responsive Web Design exam with reliable study materials. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scrolling Panels and Custom Scrollbars | Advanced Techniques - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Prepare effectively for the Certified Responsive Web Design exam with reliable study materials. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-17T09:37:21+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/\",\"name\":\"Scrolling Panels and Custom Scrollbars | Advanced Techniques - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-15T09:43:51+00:00\",\"dateModified\":\"2024-10-17T09:37:21+00:00\",\"description\":\"Prepare effectively for the Certified Responsive Web Design exam with reliable study materials. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scrolling Panels and Custom Scrollbars | Advanced Techniques\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scrolling Panels and Custom Scrollbars | Advanced Techniques - Tutorial","description":"Prepare effectively for the Certified Responsive Web Design exam with reliable study materials. Get Certified Now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/","og_locale":"en_US","og_type":"article","og_title":"Scrolling Panels and Custom Scrollbars | Advanced Techniques - Tutorial","og_description":"Prepare effectively for the Certified Responsive Web Design exam with reliable study materials. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-17T09:37:21+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/","name":"Scrolling Panels and Custom Scrollbars | Advanced Techniques - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-15T09:43:51+00:00","dateModified":"2024-10-17T09:37:21+00:00","description":"Prepare effectively for the Certified Responsive Web Design exam with reliable study materials. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/scrolling-panels-and-custom-scrollbars-advanced-techniques\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Scrolling Panels and Custom Scrollbars | Advanced Techniques"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=137276"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137276\/revisions"}],"predecessor-version":[{"id":137445,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137276\/revisions\/137445"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}