Skip to content

Instantly share code, notes, and snippets.

@djoeman84
Last active July 21, 2016 00:56
Show Gist options
  • Save djoeman84/affe1ae7a472dccfb94686c83c32b171 to your computer and use it in GitHub Desktop.
Save djoeman84/affe1ae7a472dccfb94686c83c32b171 to your computer and use it in GitHub Desktop.
React Wrapper Component to disable scroll on child -no modern IE :(
import React, {Component} from 'react'
import $ from 'jquery'
export class NoBackgroundScroll extends Component {
componentDidMount() {
stopBackgrounScrollForEl(this.childElement);
}
componentWillUnmount() {
cleanupStopBackgroundScrollForEl(this.childElement);
}
render() {
const self = this;
return React.cloneElement(this.props.children, {
ref(el) {
if (self.props.children.ref) self.props.children.ref(el);
self.childElement = el;
},
style: Object.assign({}, this.props.children.style || {}, {msScrollSnapType: 'none'})
});
}
}
export function stopBackgrounScrollForEl(el) {
// http://stackoverflow.com/questions/19817899/jquery-or-javascript-how-to-disable-window-scroll-without-overflowhidden
$(el).on('DOMMouseScroll mousewheel', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.innerHeight(),
delta = ev.originalEvent.wheelDelta,
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
};
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
}
export function cleanupStopBackgroundScrollForEl(el) {
$(el).off('DOMMouseScroll mousewheel');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment