diff --git a/client/src/components/common/modal/modalzoom.tsx b/client/src/components/common/modal/modalzoom.tsx index 01de10cd..0ca9f6fa 100644 --- a/client/src/components/common/modal/modalzoom.tsx +++ b/client/src/components/common/modal/modalzoom.tsx @@ -51,18 +51,8 @@ export class PinZoom extends Component<PinZoomProps, PinZoomState> { if (this.zoomedImage.current) { this.zoomedImage.current.focus(); } - window.addEventListener('scroll', this.disableScroll); } - componentWillUnmount() { - window.removeEventListener('scroll', this.disableScroll); - } - - disableScroll = () => { - const { zoomInfo: { parentDivStyle } } = this.props; - window.scrollTo(0, parentDivStyle.top); - }; - close = (_: React.SyntheticEvent, forceClose = false) => { // sends a reset callback after closing modalstate const { cancelBlur } = this.state; diff --git a/client/src/index.scss b/client/src/index.scss index ebc1f943..771f9fbb 100644 --- a/client/src/index.scss +++ b/client/src/index.scss @@ -1,18 +1,26 @@ -body{ - background: rgb(255, 255, 255); - margin:0; - overflow-y: scroll; - &.cover{ - overflow: hidden; - } +body { + background: rgb(255, 255, 255); + margin: 0; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + + &.cover { + overflow: hidden; } - // overlay is shared with pincreate modal too -.modal-overlay{ +} + + + +// overlay is shared with pincreate modal too +.modal-overlay { position: fixed; - top:0; + top: 0; left: 0; - background:rgb(94, 104, 112); + background: rgb(94, 104, 112); opacity: 0.8; width: 100%; height: 100%; diff --git a/tests/client/src/components/common/modal/modalzoom.test.tsx b/tests/client/src/components/common/modal/modalzoom.test.tsx index 2e28082c..1f65336d 100644 --- a/tests/client/src/components/common/modal/modalzoom.test.tsx +++ b/tests/client/src/components/common/modal/modalzoom.test.tsx @@ -73,16 +73,6 @@ describe('The pin zoom modal', () => { expect(props.reset).toHaveBeenCalledTimes(1); }); - test('will disable the scroll on mount and when user tries to scroll', () => { - global.scrollTo = jest.fn(); - const mockedScroll = jest.mocked(global.scrollTo); - const wrapper = shallow(<PinZoom {...props} />); - mockedScroll.mockClear(); - const instance = wrapper.instance() as PinZoom; - instance.disableScroll(); - expect(mockedScroll).toHaveBeenCalledWith(0, 10); - }); - test('will toggle the comments window', () => { global.innerHeight = 1000; const updatedProps = { @@ -135,26 +125,6 @@ describe('The pin zoom modal', () => { instance.close({} as React.SyntheticEvent, false); }); - test('will add eventlisteners to listen for scrolling events on mount', () => { - global.addEventListener = jest.fn(); - const mockedAddEventListener = jest.mocked(global.addEventListener); - shallow(<PinZoom {...props} />); - const events = mockedAddEventListener.mock.calls.map((c) => c[0]); - expect(global.addEventListener).toHaveBeenCalledTimes(1); - expect(events).toEqual(['scroll']); - }); - - test('will remove eventlisteners and reinstate scroll when modal unloads', () => { - global.removeEventListener = jest.fn(); - const mockedRemoveEventListener = jest.mocked(global.removeEventListener); - const wrapper = shallow(<PinZoom {...props} />); - const instance = wrapper.instance() as PinZoom; - instance.componentWillUnmount(); - const events = mockedRemoveEventListener.mock.calls.map((c) => c[0]); - expect(global.removeEventListener).toHaveBeenCalledTimes(1); - expect(events).toEqual(['scroll']); - }); - test('will set the image metadata in state', () => { const wrapper = shallow<PinZoom>(<PinZoom {...props} />); expect(wrapper.state().imgMetaData).toBe(null);