mirror of
https://github.com/infeng/react-viewer.git
synced 2025-12-08 17:36:40 +00:00
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:
parent
e3cc30ba54
commit
135de79f35
@ -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 || (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user