How to use the dom-lib.getScrollbarSize function in dom-lib

To help you get started, we’ve selected a few dom-lib examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github rsuite / rsuite / src / fixtures / ModalManager.js View on Github external
style: {
                overflow: container.style.overflow,
                paddingRight: container.style.paddingRight
            }
        };

        let style = {
            overflow: 'hidden'
        };

        data.overflowing = isOverflowing(container);

        if (data.overflowing) {
            // use computed style, here to get the real padding
            // to add our scrollbar width
            style.paddingRight = parseInt(addStyle(container, 'paddingRight') || 0, 10) + getScrollbarSize() + 'px';
        }

        addStyle(container, style);

        data.classes.forEach(addClass.bind(null, container));

        this.containers.push(container);
        this.data.push(data);

        return modalIdx;
    }
github rsuite / rsuite / src / Modal / Modal.tsx View on Github external
getStyles(dialogElement?: HTMLElement) {
    const { container, overflow, drawer } = this.props;
    const node: any = dialogElement || this.dialogRef.current;
    const doc: any = ownerDocument(node);
    const scrollHeight = node ? node.scrollHeight : 0;

    const bodyIsOverflowing = isOverflowing(container || doc.body);
    const modalIsOverflowing = scrollHeight > doc.documentElement.clientHeight;

    const styles: {
      modalStyles: React.CSSProperties;
      bodyStyles: React.CSSProperties;
    } = {
      modalStyles: {
        [isRTL() ? 'paddingLeft' : 'paddingRight']:
          bodyIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : 0,
        [isRTL() ? 'paddingRight' : 'paddingLeft']:
          !bodyIsOverflowing && modalIsOverflowing ? getScrollbarSize() : 0
      },
      bodyStyles: {}
    };

    if (!overflow) {
      return styles;
    }

    const bodyStyles: React.CSSProperties = {
      overflow: 'auto'
    };

    if (node) {
      // default margin
github rsuite / rsuite / src / Modal / Modal.tsx View on Github external
const node: any = dialogElement || this.dialogRef.current;
    const doc: any = ownerDocument(node);
    const scrollHeight = node ? node.scrollHeight : 0;

    const bodyIsOverflowing = isOverflowing(container || doc.body);
    const modalIsOverflowing = scrollHeight > doc.documentElement.clientHeight;

    const styles: {
      modalStyles: React.CSSProperties;
      bodyStyles: React.CSSProperties;
    } = {
      modalStyles: {
        [isRTL() ? 'paddingLeft' : 'paddingRight']:
          bodyIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : 0,
        [isRTL() ? 'paddingRight' : 'paddingLeft']:
          !bodyIsOverflowing && modalIsOverflowing ? getScrollbarSize() : 0
      },
      bodyStyles: {}
    };

    if (!overflow) {
      return styles;
    }

    const bodyStyles: React.CSSProperties = {
      overflow: 'auto'
    };

    if (node) {
      // default margin
      let headerHeight = 46;
      let footerHeight = 46;