{"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 – 10 Answers ] CSS – HTML – Hiding the scrollbar on an HTML page"},"content":{"rendered":"

How to Hide the scrollbar on an HTML page using CSS ?<\/p>\n

Html Code<\/span> <\/div> 
<style type="text\/css">body {    overflow:hidden;}\t\t          <\/style><\/code><\/pre> <\/div>\n
    \n
  • Set overflow: hidden; on the body tag like this:<\/li>\n<\/ul>\n
     
     Html code<\/span> <\/div> 
    <style type="text\/css">body {    overflow:hidden;}\t\t          <\/style><\/code><\/pre> <\/div>\n
      \n
    • The code above hides both horizontal and vertical scrollbar.<\/li>\n<\/ul>\n
      If you want to hide only the vertical scrollbar, use overflow-y:<\/p>\n
       
       Html Code<\/span> <\/div> 
      <style type="text\/css">body {    overflow-y:hidden;}\t\t         <\/style><\/code><\/pre> <\/div>\n
        \n
      • And if you want to hide only the horizontal scrollbar, use overflow-x:<\/li>\n<\/ul>\n
         
         Html Code<\/span> <\/div> 
        <style type="text\/css">body {    overflow-x:hidden;}<\/style><\/code><\/pre> <\/div>\n
          \n
        • This works for webkit:<\/li>\n<\/ul>\n
           
           Css code<\/span> <\/div> 
          #element::-webkit-scrollbar {     display: none; }<\/code><\/pre> <\/div>\n
            \n
          • If you want all scrollbars hidden, use<\/li>\n<\/ul>\n
             
             Css Code<\/span> <\/div> 
            ::-webkit-scrollbar {     display: none; }::-webkit-scrollbar {     display: block; }<\/code><\/pre> <\/div>\n
            [ad type=”banner”]\n
              \n
            • You can of course always use width: 0, which can than be easily restored with width: auto.<\/li>\n<\/ul>\n
                \n
              • You can accomplish this with a wrapper div that has it’s overflow hidden, and the inner div set to auto.<\/li>\n
              • To remove the inner div’s scroll bar, you can pull it out of the outer div’s viewport by applying a negative margin to the inner div.<\/li>\n
              • Then apply equal padding to the inner div so that the content stays in view.<\/li>\n<\/ul>\n
                HTML<\/span> <\/strong>:<\/span><\/h4>\n
                 
                 Html Code<\/span> <\/div> 
                <div class="hide-scroll">    <div class="viewport">        ...    <\/div><\/div><\/code><\/pre> <\/div>\n
                CSS :<\/span><\/strong><\/h4>\n
                 
                 Css Code<\/span> <\/div> 
                .hide-scroll {    overflow: hidden;}.viewport {    overflow: auto;    \/* Make sure the inner div is not larger than the container     * so that we have room to scroll.     *\/    max-height: 100%;    \/* Pick an arbitrary margin\/padding that should be bigger     * than the max width of all the scroll bars across     * the devices you are targeting.     * padding = -margin     *\/    margin-right: -100px;    padding-right: 100px;}<\/code><\/pre> <\/div>\n
                  \n
                • We can do this :<\/li>\n<\/ul>\n
                   
                   Html code<\/span> <\/div> 
                  <div class="contentScroller"><div class="content"><\/div><\/div>.contentScroller {overflow-y: auto; visibility: hidden;}.content {visibility: visible;}<\/code><\/pre> <\/div>\n
                    \n
                  • You can use the CSS property overflow and -ms-overflow-style with a combination with ::-webkit-scrollbar.<\/li>\n
                  • Tested on IE10+, Firefox, Safari and Chrome and works good:<\/li>\n<\/ul>\n
                     
                     Css Code<\/span> <\/div> 
                    .container {    -ms-overflow-style: none;  \/\/ IE 10+    overflow: -moz-scrollbars-none;  \/\/ Firefox}.container::-webkit-scrollbar {     display: none;  \/\/ Safari and Chrome}<\/code><\/pre> <\/div>\n
                    [ad type=”banner”]\n
                      \n
                    • when you hide the scrollbar with padding-right, because the default scrollbar width is different on each browser.<\/li>\n<\/ul>\n
                      Note<\/strong>: In the latest versions of Firefox the -moz-scrollbars-none property is deprecated ( link ).<\/p>\n
                        \n
                      • Use css overflow property:<\/li>\n<\/ul>\n
                         
                         Css Code<\/span> <\/div> 
                        .noscroll {  width:150px;  height:150px;  overflow: auto; \/* or hidden, or visible *\/}<\/code><\/pre> <\/div>\n
                          \n
                        • Here’s a jsfiddle, which uses the solution below to hide a horizontal scrollbar.<\/li>\n<\/ul>\n
                           
                           Css Code<\/span> <\/div> 
                          .scroll-wrapper{    overflow-x: scroll;}.scroll-wrapper::-webkit-scrollbar {     display: none; }<\/code><\/pre> <\/div>\n
                            \n
                          • To disable vertical scroll bar just add : overflow-y:hidden;<\/li>\n<\/ul>\n
                              \n
                            • Cross Browser Approach to hiding the scrollbar.<\/li>\n<\/ul>\n
                               
                               Css Code<\/span> <\/div> 
                              \/* make parent invisible *\/#parent {    visibility: hidden;    overflow: scroll;}\/* safari and chrome specific style, don't need to make parent invisible because we can style webkit scrollbars *\/#parent:not(*:root) {  visibility: visible;}\/* make safari and chrome scrollbar invisible *\/#parent::-webkit-scrollbar {  visibility: hidden;}\/* make the child visible *\/#child {    visibility: visible;}<\/code><\/pre> <\/div>\n
                              HTML :<\/span><\/h4>\n
                               
                               Html Code<\/span> <\/div> 
                              <h1>Wikitechy<\/h1><div id="box">    <div id="content">        <p>Hi !!! Welcome to Wikitechy<\/p>    <\/div><\/code><\/pre> <\/div>\n
                              CSS :<\/strong><\/span><\/h4>\n
                               
                               Css Code<\/span> <\/div> 
                              h1{font-weight:bold;font-size:2em;} \/* ignore only for header *\/\/* *********************** *\/div#box{    height:200px;    width:300px;  overflow:hidden;    border:1px solid black;    padding: 10px;}div#content{    height:200px;    width:326px;    \/*     * Uncomment to see scrollbar    width:300px;    *\/    overflow:auto;}<\/code><\/pre> <\/div>\n[ad type=”banner”]\n","protected":false},"excerpt":{"rendered":"
                              PROBLEM : How to Hide the scrollbar on an HTML page using CSS ? SOLUTION 1: Set overflow: hidden; on the body tag like this: The code above hides both horizontal and vertical scrollbar. If you want to hide only the vertical scrollbar, use overflow-y: And if you want to hide only the horizontal scrollbar, […]<\/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}]}}