scrollbar.ts 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. // Slightly modified: https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js
  2. // No "dom-css" dependancy
  3. let scrollbarWidth = null;
  4. export default function getScrollbarWidth() {
  5. if (scrollbarWidth !== null) {
  6. return scrollbarWidth;
  7. }
  8. /* istanbul ignore else */
  9. if (typeof document !== 'undefined') {
  10. const div = document.createElement('div');
  11. const newStyles = {
  12. width: '100px',
  13. height: '100px',
  14. position: 'absolute',
  15. top: '-9999px',
  16. overflow: 'scroll',
  17. MsOverflowStyle: 'scrollbar'
  18. };
  19. Object.keys(newStyles).map(style => {
  20. div.style[style] = newStyles[style];
  21. });
  22. document.body.appendChild(div);
  23. scrollbarWidth = (div.offsetWidth - div.clientWidth);
  24. document.body.removeChild(div);
  25. } else {
  26. scrollbarWidth = 0;
  27. }
  28. return scrollbarWidth || 0;
  29. }
  30. export const hasNoOverlayScrollbars = getScrollbarWidth() > 0;
  31. export const addClassIfNoOverlayScrollbar = (classname: string, htmlElement: HTMLElement = document.body) => {
  32. if (hasNoOverlayScrollbars) {
  33. htmlElement.classList.add(classname);
  34. }
  35. };