Hide vertical & horizontal scrollbar of a DIV

Scrollbars are effective & essential in keeping overall page height or width under control. It allows the overflowing content within a DIV element to be accessed either by scrolling or panning action. The default styles of the scrollbars matches with the browser, but essentially not with your website theme. So using it will make it look like an odd man.

Webkit based browsers like Chrome, Safari etc., provides pseudo selector to customize the color and size of the scrollbars to match the website. You can hide the scrollbar using following CSS snippet

.__sb-test::-webkit-scrollbar { width: 0px; }

Since this CSS selector is specific to webkit browsers, we have to do workaround to achieve same effect in other browsers like firefox, IE, Edge etc.,

<div class="outer">
<div class="inner">
This is very lengthy statement that will wrap. This is very lengthy statement that will wrap and show scroll
</class>
</div>

.outer{
  min-height:200px;
  width:200px;
  overflow:hidden;
}

.inner{
  whitespace:nowrap;
  padding-right:17px;
  width:100%;
}

Above CSS script will hide the vertical scrollbar, but it has an issue - different browsers will have different width/size for scroll bars. So you cannot statically specify it.

So we have to adapt above concept and make the scrollbar height detection dynamic through JavaScript.

Following script helps you to hide the scrollbar consistently in all browsers. It is achieved using concept 

1) This script forcefully enables the scroll on the element by using CSS overflow-x:scroll.

2) Then the width of the scrollbar is calculated

3) The calculated width is set as a negative margin for the outer element, This effectively hides the scrollbar consistently on all browsers.

_findScrollbarWidth() {
      let parent: JQuery<HTMLElement>;
      let child: JQuery<HTMLElement>;

      if (this.sbarWidth === null) {
        const style = document.createElement('style');
        style.innerHTML = '.__sb-test::-webkit-scrollbar { width: 0px; }';
        document.body.appendChild(style);

        parent = $('<div class="__sb-test" style="width:50px;height:50px;overflow:auto;">' +
          '<div/></div>')
          .appendTo('body');
        child = parent.children();
        this.sbarWidth = child.innerWidth() - child.height(99).innerWidth();

        // clean
        parent.remove();
        document.body.removeChild(style);
      }
}

_hideScrollBars() {
      this._findScrollbarWidth();
      this.$innerWrapper.css('margin-bottom', -1 * this.sbarWidth);
}