スクロールバーを無効にし、マウスホイールとスクロールスクロールのみでスクロールを有効にします

ブラウザからスクロールバーを無効にし、マウスホイールを使用してWebをスクロールし、（モバイルデバイスで）スクロールしてdivsの上下？スクロールバーを無効にし、マウスホイールとスクロールスクロールのみでスクロールを有効にします

HTML：：

<style> 
html, body { 
height: 100%; 
} 
div { 
width: 100%; 
height: 100%; 
background-size: cover; 
} 
</style> 
<body> 
<div id="div01" style="background: red"></div> 
<div id="div02" style="background: blue"></div> 
<div id="div03" style="background: green"></div> 
</body>

JS：

var div01 = $("#div01"); 
var div02 = $("#div02"); 
var div03 = $("#div03"); 
div01.click(function() { 
    $("html, body").animate({ scrollTop: div02.offset().top }, 1500); 
}); 
div02.click(function() { 
    $("html,body").animate({ scrollTop: div03.offset().top }, 1500);   
});

次のdivに行くクリックイベントでのコードですが、どのように私はそれを変更することができ、この考えに基づき

クリックの代わりにマウスホイールとタッチスクロールに移動しますか？また、スクロールするときに前のdivコードを追加しますか？

ありがとうございました！

出典

2016-03-24 Leandro Soriano

それはあなた

*{margin:0;} 
 
#container-main{ 
 
    height: 100%; 
 
    width: 100%; 
 
    
 
    overflow: hidden; 
 
} 
 

 
#container-sub{ 
 
    width: 100%; 
 
    height: 99%; 
 

 
    overflow: auto; 
 
    padding-right: 15px; 
 
} 
 

 
html, body{ 
 
    height: 99%; 
 

 
    overflow:hidden; 
 
}

<div id="container-main"><div id="container-sub"> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    hello<br/>test1<br/>test2<br/>test3<br/> 
 
    
 
    good<br/>bye. 
 
</div><div>

のために動作します

出典

2016-03-24 19:28:00

スクロールバーを無効にし、マウスホイールとスクロールスクロールのみでスクロールを有効にします

答えて

関連する問題