{"id":22414,"date":"2024-03-15T23:33:49","date_gmt":"2024-03-15T23:33:49","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/"},"modified":"2024-03-21T22:49:29","modified_gmt":"2024-03-21T22:49:29","slug":"how-to-use-mcustomscrollbar-in-h5","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/","title":{"rendered":"How to use mcustomscrollbar in H5?"},"content":{"rendered":"<p>The steps to use mcustomscrollbar in H5 are as follows:<\/p>\n<ol>\n<li>Firstly, download and import the files of the mCustomScrollbar plugin. You can download the latest version of the plugin files from the official website, and then add the js and css files to your project.<\/li>\n<li>In an HTML file, create a container element with a fixed height to contain the content that requires a custom scroll bar.<\/li>\n<li>In the CSS file, style the container element to set its height and width, and hide the default browser scrollbar.<\/li>\n<li>In a JavaScript file, use a jQuery selector to target a container element and then call the mCustomScrollbar method to apply a custom scrollbar.<\/li>\n<\/ol>\n<p>Here is an example code:<\/p>\n<p>Hypertext Markup Language (HTML)<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"scroll-container\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-comment\">&lt;!-- \u9700\u8981\u6dfb\u52a0\u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u7684\u5185\u5bb9 --&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>Cascading Style Sheets<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-selector-class\">.scroll-container<\/span> {\r\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\r\n  <span class=\"hljs-attribute\">overflow<\/span>: auto;\r\n}\r\n<\/code><\/pre>\n<p>The programming language of JavaScript.<\/p>\n<pre class=\"post-pre\"><code>$(<span class=\"hljs-variable language_\">document<\/span>).<span class=\"hljs-title function_\">ready<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  $(<span class=\"hljs-string\">\".scroll-container\"<\/span>).<span class=\"hljs-title function_\">mCustomScrollbar<\/span>();\r\n});\r\n<\/code><\/pre>\n<p>By following the steps above, you can use the mCustomScrollbar plugin to add a custom scrollbar in H5. You can further customize the style and behavior of the scrollbar based on the plugin&#8217;s documentation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The steps to use mcustomscrollbar in H5 are as follows: Firstly, download and import the files of the mCustomScrollbar plugin. You can download the latest version of the plugin files from the official website, and then add the js and css files to your project. In an HTML file, create a container element with a [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-22414","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use mcustomscrollbar in H5? - Blog - Silicon Cloud<\/title>\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.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use mcustomscrollbar in H5?\" \/>\n<meta property=\"og:description\" content=\"The steps to use mcustomscrollbar in H5 are as follows: Firstly, download and import the files of the mCustomScrollbar plugin. You can download the latest version of the plugin files from the official website, and then add the js and css files to your project. In an HTML file, create a container element with a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T23:33:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T22:49:29+00:00\" \/>\n<meta name=\"author\" content=\"William Carter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"William Carter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/\"},\"author\":{\"name\":\"William Carter\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/f697031891aacefc4b681d139781d3c0\"},\"headline\":\"How to use mcustomscrollbar in H5?\",\"datePublished\":\"2024-03-15T23:33:49+00:00\",\"dateModified\":\"2024-03-21T22:49:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/\"},\"wordCount\":169,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/\",\"name\":\"How to use mcustomscrollbar in H5? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T23:33:49+00:00\",\"dateModified\":\"2024-03-21T22:49:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use mcustomscrollbar in H5?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/f697031891aacefc4b681d139781d3c0\",\"name\":\"William Carter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1786698071dd8d74bec894b512f9e3c610c3a2a32985f67e688976cee3c8bbef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1786698071dd8d74bec894b512f9e3c610c3a2a32985f67e688976cee3c8bbef?s=96&d=mm&r=g\",\"caption\":\"William Carter\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/williamcarter\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to use mcustomscrollbar in H5? - Blog - Silicon Cloud","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.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/","og_locale":"en_US","og_type":"article","og_title":"How to use mcustomscrollbar in H5?","og_description":"The steps to use mcustomscrollbar in H5 are as follows: Firstly, download and import the files of the mCustomScrollbar plugin. You can download the latest version of the plugin files from the official website, and then add the js and css files to your project. In an HTML file, create a container element with a [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T23:33:49+00:00","article_modified_time":"2024-03-21T22:49:29+00:00","author":"William Carter","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"William Carter","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/"},"author":{"name":"William Carter","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/f697031891aacefc4b681d139781d3c0"},"headline":"How to use mcustomscrollbar in H5?","datePublished":"2024-03-15T23:33:49+00:00","dateModified":"2024-03-21T22:49:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/"},"wordCount":169,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/","name":"How to use mcustomscrollbar in H5? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T23:33:49+00:00","dateModified":"2024-03-21T22:49:29+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-mcustomscrollbar-in-h5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use mcustomscrollbar in H5?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/f697031891aacefc4b681d139781d3c0","name":"William Carter","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1786698071dd8d74bec894b512f9e3c610c3a2a32985f67e688976cee3c8bbef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1786698071dd8d74bec894b512f9e3c610c3a2a32985f67e688976cee3c8bbef?s=96&d=mm&r=g","caption":"William Carter"},"url":"https:\/\/www.silicloud.com\/blog\/author\/williamcarter\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=22414"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22414\/revisions"}],"predecessor-version":[{"id":56335,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22414\/revisions\/56335"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=22414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=22414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=22414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}