souhe / reactScrollbar

Scrollbar component for React
MIT License
466 stars 137 forks source link

Zoom in Chrome. #150

Open FantomNY opened 4 years ago

FantomNY commented 4 years ago

When you make a change zoom in the browser, like Chrome (middle wheel), you can see a custom scroll bar. It is a bag. I found to fix it.

In file getScrollbarWidth.js `'use strict';

Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = getScrollbarWidth;

var _domCss = require('dom-css');

var _domCss2 = _interopRequireDefault(_domCss);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var scrollbarWidth = false; var zoomBrowser = 100;

function getScrollbarWidth(zoom) { if (scrollbarWidth !== false && zoomBrowser === zoom) return scrollbarWidth; / istanbul ignore else / if (typeof document !== 'undefined') { var div = document.createElement('div'); (0, _domCss2["default"])(div, { width: 100, height: 100, position: 'absolute', top: -9999, overflow: 'scroll', MsOverflowStyle: 'scrollbar' }); document.body.appendChild(div); scrollbarWidth = div.offsetWidth - div.clientWidth + 1; document.body.removeChild(div); } else { scrollbarWidth = 0; } zoomBrowser = zoom; return scrollbarWidth || 0; }`


And file Scrollbars\index.js `{ key: 'render', value: function render() { var _this7 = this; *var browserZoomLevel = Math.round(window.devicePixelRatio 100); var scrollbarWidth = (0, _getScrollbarWidth2["default"])(browserZoomLevel);* / eslint-disable no-unused-vars */