disableTrack*MousewheelScrolling props;

disableTrack*WidthCompensation props;

CHANGELOG.md

@@ -1,8 +1,16 @@
 # CHANGELOG
 
+### v4.0.0-alpha.21
+
+- Fix: [#71](https://github.com/xobotyi/react-scrollbars-custom/issues/71);
+- Fixed and improved sizes translation;
+- Added `disableTrack*MousewheelScrolling` props;
+- Prop `compensateScrollbarsWidth` inverted and renamed to `disableTracksWidthCompensation`;
+- Added `disableTrackXWidthCompensation` and `disableTrackYWidthCompensation` props;
+
 ### v4.0.0-alpha.20
 
-- Fix: #68;
+- Fix: [#68](https://github.com/xobotyi/react-scrollbars-custom/issues/68);
 - Sizes loosing optimisation;
 
 ### v4.0.0-alpha.19

README.md

@@ -204,8 +204,25 @@ Whether to use momentum scrolling, suitable for iOS (will add `-webkit-overflow-
 Whether to use default visual styles.  
 _Note:_ Styles needed to proper component work will be passed regardless of this option.
 
-**compensateScrollbarsWidth** _`:boolean`_ = true  
-Whether to add indents to wrapper element in order to not let content flow under the tracks.
+**disableTracksMousewheelScrolling** _`:boolean`_ = undefined  
+Disable content scrolling while preforming a wheel event over the track.
+
+**disableTrackXMousewheelScrolling** _`:boolean`_ = undefined  
+Disable content scrolling while preforming a wheel event over the track.
+
+**disableTrackYMousewheelScrolling** _`:boolean`_ = undefined  
+Disable content scrolling while preforming a wheel event over the track.
+
+**disableTracksWidthCompensation** _`:boolean`_ = undefined  
+Disable both vertical and horizontal wrapper indents that added in order to not let tracks overlay content.
+_Note:_ Works only with default styles enabled.
+
+**disableTrackXWidthCompensation** _`:boolean`_ = undefined  
+Disable horizontal wrapper indents that added in order to not let horizontal track overlay content.
+_Note:_ Works only with default styles enabled.
+
+**disableTrackYWidthCompensation** _`:boolean`_ = undefined  
+Disable vertical wrapper indents that added in order to not let vertical track overlay content.
 _Note:_ Works only with default styles enabled.
 
 **minimalThumbSize** _`:number`_ = 30  

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-scrollbars-custom",
   "description": "The best React custom scrollbars component",
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.21",
   "repository": {
     "type": "git",
     "url": "https://github.com/xobotyi/react-scrollbars-custom.git"

src/Scrollbar.tsx

@@ -62,7 +62,14 @@ export type ScrollbarProps = ElementPropsWithElementRefAndRenderer & {
   translateContentSizeXToHolder?: boolean;
 
   noDefaultStyles?: boolean;
-  compensateScrollbarsWidth?: boolean;
+
+  disableTracksMousewheelScrolling?: boolean;
+  disableTrackXMousewheelScrolling?: boolean;
+  disableTrackYMousewheelScrolling?: boolean;
+
+  disableTracksWidthCompensation?: boolean;
+  disableTrackXWidthCompensation?: boolean;
+  disableTrackYWidthCompensation?: boolean;
 
   trackClickBehavior?: TRACK_CLICK_BEHAVIOR;
 
@@ -100,7 +107,14 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
     native: PropTypes.bool,
     momentum: PropTypes.bool,
     noDefaultStyles: PropTypes.bool,
-    compensateScrollbarsWidth: PropTypes.bool,
+
+    disableTracksMousewheelScrolling: PropTypes.bool,
+    disableTrackXMousewheelScrolling: PropTypes.bool,
+    disableTrackYMousewheelScrolling: PropTypes.bool,
+
+    disableTracksWidthCompensation: PropTypes.bool,
+    disableTrackXWidthCompensation: PropTypes.bool,
+    disableTrackYWidthCompensation: PropTypes.bool,
 
     minimalThumbSize: PropTypes.number,
     maximalThumbSize: PropTypes.number,
@@ -150,8 +164,6 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
   static defaultProps = {
     momentum: true,
 
-    compensateScrollbarsWidth: true,
-
     minimalThumbSize: 30,
 
     fallbackScrollbarWidth: 20,
@@ -305,10 +317,14 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       wrapper: {
         ...(useDefaultStyles && {
           ...defaultStyle.wrapper,
-          ...(props.compensateScrollbarsWidth && {
-            [state.isRTL ? "left" : "right"]: state.trackYVisible ? 10 : 0,
-            bottom: state.trackXVisible ? 10 : 0
-          })
+          ...(!props.disableTracksWidthCompensation &&
+            !props.disableTrackYWidthCompensation && {
+              [state.isRTL ? "left" : "right"]: state.trackYVisible ? 10 : 0
+            }),
+          ...(!props.disableTracksWidthCompensation &&
+            !props.disableTrackXWidthCompensation && {
+              bottom: state.trackXVisible ? 10 : 0
+            })
         }),
         ...props.wrapperProps!.style,
         position: "absolute",
@@ -724,7 +740,14 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       native,
       momentum,
       noDefaultStyles,
-      compensateScrollbarsWidth,
+
+      disableTracksMousewheelScrolling,
+      disableTrackXMousewheelScrolling,
+      disableTrackYMousewheelScrolling,
+
+      disableTracksWidthCompensation,
+      disableTrackXWidthCompensation,
+      disableTrackYWidthCompensation,
 
       noScrollX,
       noScrollY,
@@ -881,7 +904,9 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
         style: styles.trackY,
         elementRef: this.elementRefTrackY,
         onClick: this.handleTrackYClick,
-        onWheel: this.handleTrackYMouseWheel,
+        ...((disableTracksMousewheelScrolling || disableTrackYMousewheelScrolling) && {
+          onWheel: this.handleTrackYMouseWheel
+        }),
         axis: AXIS_DIRECTION.Y
       } as ScrollbarTrackProps;
 
@@ -909,7 +934,9 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
         style: styles.trackX,
         elementRef: this.elementRefTrackX,
         onClick: this.handleTrackXClick,
-        onWheel: this.handleTrackXMouseWheel,
+        ...((disableTracksMousewheelScrolling || disableTrackXMousewheelScrolling) && {
+          onWheel: this.handleTrackXMouseWheel
+        }),
         axis: AXIS_DIRECTION.X
       } as ScrollbarTrackProps;
 

testbench/app/index.tsx

@@ -1,17 +1,12 @@
 import * as React from "react";
 import * as ReactDom from "react-dom";
 import Scrollbar from "../../src/Scrollbar";
-import ChangingComponent from "./ChangingComponent";
 
 class App extends React.Component<{}, { count: number }> {
   public render(): React.ReactNode {
     return (
-      <Scrollbar
-        style={{ minHeight: 200, minWidth: 200, maxHeight: 500, maxWidth: 600, margin: 64 }}
-        translateContentSizesToHolder
-        compensateScrollbarsWidth={false}
-      >
-        <ChangingComponent />
+      <Scrollbar style={{ width: 500, height: 600, margin: 64 }}>
+        <div style={{ width: 900, height: 1000, margin: 50 }} />
       </Scrollbar>
     );
   }

tests/Scrollbar.spec.tsx

@@ -1408,8 +1408,7 @@ describe("Scrollbar", () => {
         trackYProps: {},
         trackXProps: {},
         thumbXProps: {},
-        thumbYProps: {},
-        compensateScrollbarsWidth: true
+        thumbYProps: {}
       };
       const state: ScrollbarState = {
         trackYVisible: true,