allow touch scrolling in case of overflow hidden

Question

I am building a responsive web application, I have applied overflow:hidden to a div since I am handling the scrolling using other div in desktop view. Now I need to enable touch scrolling in devices since the other div is invisible for small screens.

I don't want show scrollbar in devices since I have mutual dependent divs. one div scroll effects other divs scroll and vice versa.

 $('.outer').on('scroll',function(e){ $('.outer').scrollLeft(e.currentTarget.scrollLeft); }); 

 .outer{ width:200px; } .inner{ width:400px; display:block; height:50%; background:#ccc; } .content{ background:blue; height:100px; margin-bottom:10px; overflow:hidden; } .scrollPane{ height:20px; overflow:auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content outer"><div class ="inner"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></div> <div class="content outer"><div class ="inner"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div></div> <div class="scrollPane outer"><div class ="inner"></div></div> 

How can allow only touch scrolling and make scrollbar hidden in all cases(android/ios)?

Answer 1

I found the solution by using touch events.

 $('.outer').on('scroll',function(e){ $('.outer').scrollLeft(e.currentTarget.scrollLeft); }); $('.outer').on('touchstart', handleTouchStart, false); $('.outer').on('touchmove', handleTouchMove, false); $('.outer').on('touchend', handleTouchEnd, false); var xDown = null; var yDown = null; var oldScrollPos = null; function handleTouchStart(evt) { xDown = evt.touches[0].clientX; yDown = evt.touches[0].clientY; oldScrollPos = $('.outer').scrollLeft(); }; function handleTouchMove(evt) { console.log('touch move') if ( ! xDown || ! yDown ) { return; } var xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; var xDiff = xDown - xUp; var yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/ console.log('moving horizontally'); var newScrollLeft = oldScrollPos + xDiff; $('.outer').scrollLeft(newScrollLeft); if ( xDiff > 0 ) { /* left swipe */ } else { /* right swipe */ } } else { if ( yDiff > 0 ) { /* up swipe */ } else { /* down swipe */ } } }; function handleTouchEnd(){ /* reset values */ xDown = null; yDown = null; oldScrollPos = null; } 

 .outer{ width:200px; } .inner{ width:400px; display:block; height:50%; background:#ccc; } .content{ background:blue; height:100px; margin-bottom:10px; overflow:hidden; } .scrollPane{ height:20px; overflow:auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content outer"><div class ="inner"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></div> <div class="content outer"><div class ="inner"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div></div> <div class="scrollPane outer"><div class ="inner"></div></div>