{"id":2053,"date":"2017-03-24T15:16:13","date_gmt":"2017-03-24T09:46:13","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=2053"},"modified":"2017-03-28T16:33:29","modified_gmt":"2017-03-28T11:03:29","slug":"hiding-scrollbar-html-page","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/hiding-scrollbar-html-page\/","title":{"rendered":"[ Solved &#8211; 10 Answers ] CSS &#8211; HTML &#8211; Hiding the scrollbar on an HTML page"},"content":{"rendered":"<p><label class=\"label label-Warning\">PROBLEM :<\/label><\/p>\n<p>How to Hide the scrollbar on an HTML page using CSS ?<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow%3Ahidden%3B%0A%7D%0A%09%09%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>Set overflow: hidden; on the body tag like this:<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow%3Ahidden%3B%0A%7D%0A%09%09%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A\u201d message=\u201dHtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>The code above hides both horizontal and vertical scrollbar.<\/li>\n<\/ul>\n<p>If you want to hide only the vertical scrollbar, use overflow-y:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow-y%3Ahidden%3B%0A%7D%0A%09%09%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li style=\"top: 82px;\">And if you want to hide only the horizontal scrollbar, use overflow-x:<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow-x%3Ahidden%3B%0A%7D%0A%3C%2Fstyle%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>This works for webkit:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%23element%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20none%3B%20%0A%7D%0A\u201d message=\u201dCss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li style=\"top: 82px;\">If you want all scrollbars hidden, use<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20none%3B%20%0A%7D%0A%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20block%3B%20%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p style=\"top: 82px;\">[ad type=\u201dbanner\u201d]\n<ul>\n<li>You can of course always use width: 0, which can than be easily restored with width: auto.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>You can accomplish this with a wrapper div that has it\u2019s overflow hidden, and the inner div set to auto.<\/li>\n<li>To remove the inner div\u2019s scroll bar, you can pull it out of the outer div\u2019s viewport by applying a negative margin to the inner div.<\/li>\n<li>Then apply equal padding to the inner div so that the content stays in view.<\/li>\n<\/ul>\n<h4 id=\"html\"><strong><span style=\"color: #808000;\">HTML<\/span> <\/strong><span style=\"color: #808000;\">:<\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22hide-scroll%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22viewport%22%3E%0A%20%20%20%20%20%20%20%20\u2026%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"css\" style=\"top: 82px;\"><strong><span style=\"color: #800080;\">CSS :<\/span><\/strong><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d.hide-scroll%20%7B%0A%20%20%20%20overflow%3A%20hidden%3B%7D%0A.viewport%20%7B%0A%20%20%20%20overflow%3A%20auto%3B%0A%20%20%20%20%2F*%20Make%20sure%20the%20inner%20div%20is%20not%20larger%20than%20the%20container%0A%20%20%20%20%20*%20so%20that%20we%20have%20room%20to%20scroll.%0A%20%20%20%20%20*%2F%0A%20%20%20%20max-height%3A%20100%25%3B%0A%20%20%20%20%2F*%20Pick%20an%20arbitrary%20margin%2Fpadding%20that%20should%20be%20bigger%0A%20%20%20%20%20*%20than%20the%20max%20width%20of%20all%20the%20scroll%20bars%20across%0A%20%20%20%20%20*%20the%20devices%20you%20are%20targeting.%0A%20%20%20%20%20*%20padding%20%3D%20-margin%0A%20%20%20%20%20*%2F%0A%20%20%20%20margin-right%3A%20-100px%3B%0A%20%20%20%20padding-right%3A%20100px%3B%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>We can do this :<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22contentScroller%22%3E%0A%3Cdiv%20class%3D%22content%22%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A.contentScroller%20%7Boverflow-y%3A%20auto%3B%20visibility%3A%20hidden%3B%7D%0A.content%20%7Bvisibility%3A%20visible%3B%7D%0A\u201d message=\u201dHtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>You can use the CSS property overflow and -ms-overflow-style with a combination with ::-webkit-scrollbar.<\/li>\n<li>Tested on IE10+, Firefox, Safari and Chrome and works good:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.container%20%7B%0A%20%20%20%20-ms-overflow-style%3A%20none%3B%20%20%2F%2F%20IE%2010%2B%0A%20%20%20%20overflow%3A%20-moz-scrollbars-none%3B%20%20%2F%2F%20Firefox%0A%7D%0A.container%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20none%3B%20%20%2F%2F%20Safari%20and%20Chrome%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p style=\"top: 82px;\">[ad type=\u201dbanner\u201d]\n<ul>\n<li>when you hide the scrollbar with padding-right, because the default scrollbar width is different on each browser.<\/li>\n<\/ul>\n<p><strong>Note<\/strong>: In the latest versions of Firefox the -moz-scrollbars-none property is deprecated ( link ).<\/p>\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>Use css overflow property:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.noscroll%20%7B%0A%20%20width%3A150px%3B%0A%20%20height%3A150px%3B%0A%20%20overflow%3A%20auto%3B%20%2F*%20or%20hidden%2C%20or%20visible%20*%2F%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>Here\u2019s a jsfiddle, which uses the solution below to hide a horizontal scrollbar.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.scroll-wrapper%7B%0A%20%20%20%20overflow-x%3A%20scroll%3B%0A%7D%0A.scroll-wrapper%3A%3A-webkit-scrollbar%20%7B%20%0A%20%20%20%20display%3A%20none%3B%20%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>To disable vertical scroll bar just add : overflow-y:hidden;<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>Cross Browser Approach to hiding the scrollbar.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%2F*%20make%20parent%20invisible%20*%2F%0A%23parent%20%7B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%20%20%20%20overflow%3A%20scroll%3B%7D%0A%2F*%20safari%20and%20chrome%20specific%20style%2C%20don\u2019t%20need%20to%20make%20parent%20invisible%20because%20we%20can%20style%20webkit%20scrollbars%20*%2F%0A%23parent%3Anot(*%3Aroot)%20%7B%0A%20%20visibility%3A%20visible%3B%7D%0A%2F*%20make%20safari%20and%20chrome%20scrollbar%20invisible%20*%2F%0A%23parent%3A%3A-webkit-scrollbar%20%7B%0A%20%20visibility%3A%20hidden%3B%7D%0A%2F*%20make%20the%20child%20visible%20*%2F%0A%23child%20%7B%0A%20%20%20%20visibility%3A%20visible%3B%7D\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<h4 id=\"html-2\"><span style=\"color: #808000;\">HTML :<\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ch1%3EWikitechy%3C%2Fh1%3E%0A%3Cdiv%20id%3D%22box%22%3E%0A%20%20%20%20%3Cdiv%20id%3D%22content%22%3E%0A%20%20%20%20%20%20%20%20%3Cp%3EHi%20!!!%20Welcome%20to%20Wikitechy%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"css-2\" style=\"top: 82px;\"><span style=\"color: #800080;\"><strong>CSS :<\/strong><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dh1%7Bfont-weight%3Abold%3Bfont-size%3A2em%3B%7D%20%2F*%20ignore%20only%20for%20header%20*%2F%0A%2F*%20***********************%20*%2F%0Adiv%23box%7B%0A%20%20%20%20height%3A200px%3B%20%20%20%20width%3A300px%3B%20%20overflow%3Ahidden%3B%0A%20%20%20%20border%3A1px%20solid%20black%3B%0A%20%20%20%20padding%3A%2010px%3B%7D%0Adiv%23content%7B%0A%20%20%20%20height%3A200px%3B%0A%20%20%20%20width%3A326px%3B%20%20%20%20%2F*%0A%20%20%20%20%20*%20Uncomment%20to%20see%20scrollbar%0A%20%20%20%20width%3A300px%3B%20%20%20%20*%2F%0A%20%20%20%20overflow%3Aauto%3B%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM : How to Hide the scrollbar on an HTML page using CSS ? [pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow%3Ahidden%3B%0A%7D%0A%09%09%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] SOLUTION 1: Set overflow: hidden; on the body tag like this: [pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20overflow%3Ahidden%3B%0A%7D%0A%09%09%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A\u201d message=\u201dHtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] The code above hides both horizontal and vertical scrollbar. If you want to hide only the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[4379,4394,4384,4381,4387,4388,4389,4391,4393,4380,4392,4382,4386,4385,4378,4383,4390],"class_list":["post-2053","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-but-still-being-able-to-scroll","tag-css-hide-horizontal-scrollbar","tag-css-overflow-property","tag-hide-scrollbar","tag-hide-scrollbar-but-still-scroll","tag-hide-scrollbar-chrome","tag-hide-scrollbar-firefox","tag-hide-scrollbar-jquery","tag-hide-scrollbar-when-not-needed","tag-hide-vertical-scrollbar-but-still-scrollable","tag-hide-vertical-scrollbar-css","tag-hiding-vertical-scrollbars-with-pure-css-in-chrome","tag-how-to-disable-scrollbars-on-html-page","tag-how-to-hide-scroll-bar","tag-html-hide-scroll-bar","tag-ie-6","tag-webkit-scrollbar-hide"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=2053"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2053\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=2053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=2053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=2053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}