15

I want to hide a scroll bar in page but I can scroll like it has a scroll bar. so I cant use overflow:hidden because I want that I can scroll like normal but cannot see a scroll bar.

so I use this css code (class not-scroll-body is a class of body tag)

.not-scroll-body::-webkit-scrollbar {
    display: none; 
}

It works in Chrome , but when I use -moz- instead of -webkit- like this

.not-scroll-body::-moz-scrollbar {
    display: none; 
}

It doesn't work in Firefox.

What can I do to to make it work?

Thank you for every answer and sorry for my poor english language :)

Christian Ternus
  • 8,406
  • 24
  • 39
Mei
  • 183
  • 1
  • 1
  • 9

7 Answers7

16

In firefox 64, if you want to hide scroll when you have overflow:auto you can now do scrollbar-width: none;! Woop woop! Here are the relevant docs (browser support is show at bottom of page).

Below is a simple css only solution that will hide your vertical and horizontal scrollbar in firefox (tested in v64 & firefox dev edition v65.0b8). Hint: try vertical and horizontal scrolling on the blue div.

.not-scroll-body {
  overflow: auto;
  height: 200px;
  width: 90%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

  /* the line that rules them all */
  scrollbar-width: none;
  /* */
}

span {
  width: 200%;
  height: 400%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}
<div class="not-scroll-body"><span></span></div>
protoEvangelion
  • 4,355
  • 2
  • 29
  • 38
9

According to this answer and everything I've been able to find on the web, there's no Firefox equivalent of the -webkit-scrollbar selector. Apparently there used to be a property, -moz-scrollbars-none, that you could use for this, but it's since been removed and people recommend using overflow:hidden or a hackish margin-right: -14px solution.

Sorry I can't be more helpful -- it seems like there's no Firefox way to do this elegantly.

Community
  • 1
  • 1
Christian Ternus
  • 8,406
  • 24
  • 39
  • 1
    I tried margin-right: -14px , but the scrollbar didn't change position (nothing happened with it) although the content inside change position to the right (from margin-right -14) – Mei Oct 25 '13 at 03:34
  • หมี เมืองทอง - be sure that the parent element is `overflow:hidden` – willscripted Apr 17 '14 at 11:41
  • 1
    `overflow: hidden;` works fine on FF Mac but you seem to still need to use `overflow: -moz-scrollbars-none;` on Windows (even on 39.0). However MDN states this is already obsolete so use with caution. – dmo Jul 20 '15 at 23:44
  • It's now possible in Firefox version 64. See protoEvangelion's answer. – jwinn Jan 15 '19 at 15:48
5

I was able to hide the scrollbar but still be able to scroll with mousewheel with this solution:

html {overflow: -moz-scrollbars-none;}

Download the plugin https://github.com/brandonaaron/jquery-mousewheel and include this function:

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });
John
  • 1
  • 13
  • 98
  • 177
CrazyScientist
  • 409
  • 4
  • 6
1

cf: https://stackoverflow.com/a/41021131/4881677

This is how I do it, only CSS and works well with frameworks like bootstrap. It only needs 2 extra div:

You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

Short version for lazy people:

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>
Community
  • 1
  • 1
Jean
  • 4,911
  • 3
  • 29
  • 50
0

I assuming you want to hide the scrollbar locally. In that i mean, not on a web server for the world to see, but on your local copy of firefox, for your 'viewing pleasure' only.

this is what I've found to work for me on opensuse/kde: in userChrome.css;

#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}

use -14px to completely hide vertical-scroll (more if your system theme has wider scroll setting). I use less (10px) to see just a little of it so I can middle-click to jump to a place on the page.

thing that i did, but don't always work, any longer: in userContent.css

#content browser {
overflow:-moz-scrollbars-none;
}

-or-

html {
overflow: -moz-scrollbars-none;}
}

above used to work, but I now I've lost the mouse-wheel scroll. Only keyboard arrow keys work now.

Hope I understood what you want and this helps. Landis.

Landis Reed
  • 39
  • 1
  • 9
0

You might be able to use overflow:-moz-hidden-unscrollable -- this worked perfectly for my needs in part because I was already using dragscroll.js.

Jon Maloto
  • 41
  • 2
0

As I was looking for it myself and this thread is not providing the updated answer, I would provide it for other newcomers as myself.

#element{
 scrollbar-width: none;
}
Buckaroo
  • 1