Fix error due to preventing default wheel action

- When onWheel is used on the "viewerCore" div, event propagated cannot
  be prevented in the event handler as the event is set to passive by
  default by chrome. A warning is shown in console when scroll event
  occurs on the div

- Fixes #53
This commit is contained in:
Vaibhav 2019-04-10 17:23:49 +05:30
parent e3cc30ba54
commit 135de79f35

View File

@ -7,7 +7,7 @@ import ViewerProps, { ImageDecorator, ToolbarConfig } from './ViewerProps';
import Icon, { ActionType } from './Icon';
import * as constants from './constants';
function noop() {}
function noop() { }
const transitionDuration = 300;
@ -124,6 +124,14 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
this.handleTransitionEnd,
false
);
// Though onWheel can be directly used on the div "viewerCore", to be able to
// prevent default action, a listener is added here instead
(this.refs['viewerCore'] as HTMLDivElement).addEventListener(
'mousewheel',
this.handleMouseScroll,
false
);
this.startVisible(this.state.activeIndex);
}
@ -156,7 +164,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
realImgWidth = activeImage.defaultSize.width;
realImgHeight = activeImage.defaultSize.height;
}
let [ width, height ] = this.getImgWidthHeight(realImgWidth, realImgHeight);
let [width, height] = this.getImgWidthHeight(realImgWidth, realImgHeight);
let left = (this.containerWidth - width) / 2;
let top = (this.containerHeight - height - this.footerHeight) / 2;
let scaleX = this.props.defaultScale;
@ -589,7 +597,6 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
ref="viewerCore"
className={className}
style={viewerStryle}
onWheel={this.handleMouseScroll}
>
<div className={`${this.prefixCls}-mask`} style={{ zIndex: zIndex }} />
{this.props.noClose || (