Usage

Back to menu

Simply require the package:

const {FRSHideScrollbar} = require('frs-hide-scrollbar');

ES6 import it:

import { FRSHideScrollbar } from 'frs-hide-scrollbar';

include it locally:

<script type="text/javascript" src="node_modules/frs-hide-scrollbar/dist/FRS-hide-scrollbar.umd.js"></script>

or from unpkg CDN:

<script type="text/javascript" src="https://unpkg.com/frs-hide-scrollbar@^1.0.0/dist/FRS-hide-scrollbar.umd.js"></script>

To hide element scrollbar just add on it a frs-hide-scroll class and a frs-hide-scroll-wrapper on it`s container, like this:

<div class="frs-hide-scroll-wrapper">
  <div class="frs-hide-scroll">
    <!-- you content here -->
  </div>
</div>

And that’s it! Now FRSHideScrollbar library will detect if hiding of a scrollbar is needed and will apply correct styling changes.

Note: There is possibility to change class names to custom ones if needed (and other options - see example below). Simply add proper configuration block before loading of frs-hide-scrollbar code:

<script>
window.FRSHideScrollBar = {
  FRSHideScrollBar: {
    /* default values written in object below */
    config: {
      /* element class name: */
      className        : 'frs-hide-scroll',
      /* parent element class name */
      wrapperClassName : 'frs-hide-scroll-wrapper',
      /* whether FRSHideScrollbar should initialize on DOm load & respond on window resize events */
      autoInit         : true,
      /* <style> element to which FRS-hide-scrollbar styling will be appended */
      styleElement     : document.head.appendChild(document.createElement('style'))
    }
  }
};
</script>

<!-- Some script loading FRS-hide-scrollbar package -->

Note: or change options dynamically via update method (you can change same options as above):

import {FRSHideScrollbar} from 'frs-hide-scrollbar';

FRSHideScrollbar.update({
  className: 'newClassName'
})

To see more real-life usage example let’s jump to the example page.