Hide scrollbar in firefox

2019-04-04 15:37发布

站内文章 / HTML/CSS
9 0 0

问题:

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 :)

回答1:

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.



回答2:

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);
  });


回答3:

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>



回答4:

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>



回答5:

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.



回答6:

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.



标签： html css firefox scrollbar hide
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~