I'm trying to hide scroll bar

Question

I'm trying to hide scroll bar.for that i have given.

body::-webkit-scrollbar{display:none;}/* working in chrome */

body::-moz-scrollbar{display:none;} /*not working in Firefox */

For Firefox i have given..

body{overflow:-moz-scrollbars-none;}/* it hide the scroll bar */

but am unable to scroll the page with middle mouse.. can any one help me

Check this SO answer http://stackoverflow.com/a/23771140/4639312 — Froy, Apr 22 '16 at 14:52
Check : [In IE, Chrome & firefox](http://stackoverflow.com/a/25561646/2142994) — Ani Menon, Apr 22 '16 at 14:56
See http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — cssyphus, Apr 22 '16 at 15:00
it works. but without using . margin-right: -100px; padding-right: 100px; .. can we do ? — yunus, Apr 25 '16 at 07:36

score 1 · Answer 1 · edited May 23 '17 at 12:16

I believe body {overflow-y: hidden;overflow-x: hidden;} is not an answer to your question, as it just disables scrolling.

This is a possible answer :

.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;
}
.hide-scroll {
  overflow: hidden;
}
/* Optional styles */

.hide-scroll {
  height: 300px;
  background-color: lightgrey;
  padding: 0 5px;
  position: relative;
}
.hide-scroll:after {
  content: '';
  height: 2em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(219, 219, 219, 0)), to(rgba(211, 211, 211, 1)));
  background: -webkit-linear-gradient(rgba(219, 219, 219, 0) 0%, rgba(211, 211, 211, 1) 100%);
  background: -moz-linear-gradient(rgba(219, 219, 219, 0) 0%, rgba(211, 211, 211, 1) 100%);
  background: -o-linear-gradient(rgba(219, 219, 219, 0) 0%, rgba(211, 211, 211, 1) 100%);
  background: linear-gradient(rgba(219, 219, 219, 0) 0%, rgba(211, 211, 211, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00dbdbdb', endColorstr='#d3d3d3', GradientType=0);
}
.viewport p:last-child {
  margin-bottom: 2em;
}

<h1>Hidden scrollbar</h1>
<hr>
<div class="hide-scroll">
  <div class="viewport">
    <h2>Explaination</h2>
    <p>This example hides the scroll bar of the inner div by hiding the outer div's overflow, and by applying a negative margin to <i>pull</i> the scrollbar off of the screen. There's an equal padding applied to the inner div to counter the negative margin
      so that the content does not get pulled out of the viewport.</p>
    <h2>Lorem Ipsum</h2>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus
      vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Refer: original post

Rakowu · Answer 2 · 2018-04-20T08:54:21.443

You can hide FF Scrollbars, but it'll disable the Scroll function. You can create your own Scrollfunction

    <div id="your-selector"            
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>

    var domTarget = document.querySelector("#your-selector");
    var jQueryTarget = $("#your-selector");
    var scrollAmmount = 0;

    function scrollTarget(e) {
      var evt = window.event || e;
      var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta;

      if (delta >= 0) {
        if (scrollAmmount <= 120) {
          scrollAmmount += 30;
        }
        jQueryTarget.css("top", scrollAmmount + "px");
      } else {
        scrollAmmount -= 30;
        jQueryTarget.css("top", scrollAmmount + "px");
      }

      if (evt.preventDefault) {
        evt.preventDefault();
      } else {
        return false;
      }
    }

    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"

    if (domTarget.attachEvent) {
      domTarget.attachEvent("on" + mousewheelevt, scrollTarget);
    } else if (domTarget.addEventListener) {
      domTarget.addEventListener(mousewheelevt, scrollTarget, false);
    }

Edit: An other way is just usind css. Give the parent container an overflow hidden and the child element an margin-left.

yunus · Accepted Answer · 2016-05-03T07:16:55.060

Hiding scroll bar with css property body::-webkit-scrollbar{display:none;} working in chrome but not in Firefox

body{overflow:-moz-scrollbars-none;} it hide the scroll bar for Firefox

when you write property for Firefox. scroll bar get disable. but you will unable to scroll page down with mouse wheel

for page scrolling with mouse wheel you need to add this script.

  $(function() { 
jQuery.scrollSpeed(100, 800);
}); // for page scrolling


body{ -ms-overflow-style: none;} /* for ie hiding scroll bar */

body::-webkit-scrollbar{display:none;} /* chrome hiding scroll bar*/

body{overflow:-moz-scrollbars-none;}  it hide the scroll bar for Firefox

I'm trying to hide scroll bar

3 Answers3