Customize the grid scrollbar

Custom CSS

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>How to customize the grid scrollbar</h2>
  <p>
    You can customize the grid scrollbar by setting your custom values in
    Flexmonster's CSS.
  </p>
  <p>
    In this example, we've set custom colors, height, and width for the
    scrollbar. Open the CSS box to see which CSS selectors and properties are
    used.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/customizing-appearance/"
      target="_blank"
      >Visit our docs for more details on customizing the appearance</a
    >.
  </p>
</div>

<div id="pivotContainer"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);
@import url(https://cdn.flexmonster.com/theme/purple/flexmonster.min.css);

/********************* Styles for the scrollbar *********************/

:root {
  --scrollbar-width-height: 10px;
}

.fm-scroll-pane::-webkit-scrollbar {
  background: #d6cee4 !important;
  width: var(--scrollbar-width-height) !important;
  height: var(--scrollbar-width-height) !important;
}

.fm-scroll-pane::-webkit-scrollbar-thumb {
  background: #aa86e9 !important;
}

.fm-scroll-pane::-webkit-scrollbar-corner {
  background: #d6cee4 !important;
}

.fm-scroll-content {
  right: var(--scrollbar-width-height) !important;
  bottom: var(--scrollbar-width-height) !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [
      	{
         	uniqueName: "Category"
        },
        {
          uniqueName: "Country"
        }
      ],
      columns: [
      	{
          uniqueName: "Destination"
        },
        {
          uniqueName: "Business Type"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
      	{
        	uniqueName: "Price",
        	aggregation: "sum"
      	}
      ],
      expands: {
        expandAll: true
      }
    }
  }
});