Source: http://jsfiddle.net/R9Ut6/.
ATTENTION: contrairement à la demo, dans mon cas, ça a fonctionné en mettant la propriété overflow-y à hidden sur .scrollDiv.
|
1 2 3 4 5 6 7 8 9 |
<div class='pageScroller'></div> Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/> <div class='scrollDiv'> DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/>DivConten<br/> </div> Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
html,body{height:100%} .scrollDiv{ width:100%; height:200px; overflow-y:scroll; border:solid 1px #f00; -webkit-overflow-scrolling: touch; } .pageScroller{ position:absolute; right:0; top:0; bottom:0; width:50%; z-index: 1; background-color: rgba(0,0,0,0.7); overflow-y:scroll; -webkit-overflow-scrolling: touch; } |
|
1 2 3 4 5 6 7 |
$( '.scrollDiv' ).bind( 'mousewheel DOMMouseScroll', function ( e ) { var e0 = e.originalEvent, delta = e0.wheelDelta || -e0.detail; this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; e.preventDefault(); }); |