jquery scroll flexbox element on body scroll
by bizamajig
HTML
<div id="bizamajig-ui-container--flex">
<div id="bizamajig-ui-container--content" class="bizamajig-ui-container--content container--scroll">
<div id="doc_section__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem erat, condimentum convallis dolor ut, ali sem. Nullam malesuada, nisl in pretium pharetra, ante magna tincidunt purus, sed viverra dolor orci vel erat. Maecenas fermentum metus ac odio imperdiet, non dapibus nibh orci aliquam.
</div>
</div>
<div id="log"></div>
<div id="log2"></div>
</div>
CSS
#bizamajig-ui-container--flex {
max-height: 1200px;
}
#bizamajig-ui-container--content {
width: 50px;
overflow-y: scroll;
max-height: 300px;
}
#log, #log2 {
position: absolute;
right: 0;
}
#log {
top: 0;
}
#log2 {
top: 20px;
}
JavaScript
$(function () {
var bzcfg = {},
myCounter = 0,
myOtherCounter = 0;
bzcfg.bizamajig__scroll__container__trigger = 0;
var $container__scroll = $( '.bizamajig-ui-container--content' ) || '';
if ( ! $container__scroll.length > 0 ) {
// alert( 'HERE' );
return false;
}
$container__scroll.scroll( function() {
myCounter = myCounter + 1;
$( "#log" ).html( "<div>Handler for .scroll() called " + myCounter + " times.</div>");
});
//Firefox
$( 'body' ).on( 'DOMMouseScroll', function( e ) { // Or #bizamajig-ui-container--flex
// console.log( $( e.target ).hasClass( 'container--scroll') );
// console.log( $( e.target ).parents( '.container--scroll' ).length > 0 );
if (
( $( e.target ).hasClass( 'container--scroll') ) ||
( $( e.target ).parents( '.container--scroll' ).length > 0 )
) {
console.log( 'SKIP' );
return true;
}
if ( e.originalEvent.detail > 0 ) {
scrollDown();
} else {
scrollUp();
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$( 'body' ).on( 'mousewheel', function( e ) { // Or #bizamajig-ui-container--flex
// console.log( $( e.target ).hasClass( 'container--scroll') );
// console.log( $( e.target ).parents( '.container--scroll' ).length > 0 );
if (
( $( e.target ).hasClass( 'container--scroll') ) ||
( $( e.target ).parents( '.container--scroll' ).length > 0 )
) {
console.log( 'SKIP' );
return true;
}
if ( e.originalEvent.wheelDelta < 0 ) {
scrollDown();
} else {
scrollUp();
}
//prevent page fom scrolling
return false;
});
function scrollDown() {
//scroll down
//console.log( 'Down ' + bzcfg.bizamajig__scroll__container__trigger );
if (...