オーバーフローのある要素でスクロールイベントをキャッチする方法についての洞察はありますか?私は、ユーザーにスクロールバーを表示せずに列をスクロールしたいと思います。オーバーフロー時のスクロールイベント:非表示要素
24
A
答えて
23
これは実際には多少のプロセスです。私がしているのは、ユーザーのマウスがスクロールしたい要素に入ったり出たりしたときにグローバルフラグを設定することです。次に、ボディのマウスホイールイベントで、MOUSE_OVERフラグがtrueであるかどうかを確認し、イベントの伝播を停止します。これは、ページ全体がオーバーフローした場合に本体がスクロールしないようにするためです。
オーバーフローを隠すと、デフォルトのスクロール機能が失われるため、自分で作成する必要があります。これを行うには、対象のdivにマウスホイールリスナーを設定し、event.wheelDeltaプロパティを使用して、ユーザーがスクロールしているかどうかを確認します。この値はブラウザによって異なりますが、スクロールダウンの場合は通常負で、スクロールアップの場合はプラスです。それに応じてdivの位置を変更することができます。
私にとって
var MOUSE_OVER = false;
$('body').bind('mousewheel', function(e){
if(MOUSE_OVER){
if(e.preventDefault) { e.preventDefault(); }
e.returnValue = false;
return false;
}
});
$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; });
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; });
$('#myDiv').bind('mousewheel', function(e){
var delta = e.wheelDelta;
if(delta > 0){
//go up
}
else{
//go down
}
});
1
私はoverflow:scrollを使用しますが、スクロールバーを非表示にするためにdivを絶対配置してください。
1
$("body").css("overflow", "hidden")
$(document).bind('mousewheel', function(evt) {
var delta = evt.originalEvent.wheelDelta
console.log(delta)
})
作品...このコードはすぐにハッキングされていますが、基本的に次のようになります。 How do I get the wheelDelta property?
0
$("div").on('wheel', function (e) {
if (e.originalEvent.deltaY < 0) {
console.log("Scroll up");
} else {
console.log("Scroll down");
}
});
これは私のためのトリックでした。 JSFiddle
StackFiddle:
$("div").on('wheel', function(e) {
if (e.originalEvent.deltaY < 0) {
console.log("Scroll up");
} else {
console.log("Scroll down");
}
});
div {
height: 50px;
width: 300px;
background-color: black;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
関連する問題
- 1. 要素グループの非表示と表示
- 2. HTML、CSS、Javascript - 非表示/表示要素
- 3. Jquery div要素非表示
- 4. jsp要素を他の要素に基づいて非表示/非表示
- 5. mouseleave 2要素表示/非表示1要素?
- 6. インラインdivと非表示オーバーフロー
- 7. マウスの移動時に要素を表示/非表示にする
- 8. jQueryの検証:デフォルトの要素以外のカスタム要素の表示/非表示
- 9. Jquery UI - 表示から1つの要素を取り出す:ドラッグ時に非表示要素
- 10. jquery - 要素を表示/非表示+各要素の時間を個別に制御する
- 11. Selenium Webdriver - 非表示の要素をクリック
- 12. jQuery innerWidth in Chromeの非表示要素
- 13. 非表示HTMLフォーム要素にidの
- 14. 選択変更時にフォーム要素を非表示にする
- 15. JS/jQueryの非表示要素、変更テキスト、ショーの要素
- 16. クラスの要素内の要素を非表示にする
- 17. オーバーフローの設定:正しく非表示
- 18. スタイルのオーバーフロー:非表示とSVG Firefox 3.6
- 19. oData WCFサービス - 要素を非表示
- 20. jCarouselリスト要素の表示/非表示のサイズ変更
- 21. コンテナ内の要素の表示と非表示
- 22. 定義リストの表示/非表示DD要素
- 23. jqueryの要素を表示/非表示ファンシーボックス閉じるイベント
- 24. jqueryで前の要素を表示/非表示にする
- 25. 条件付きで表示/非表示Windowsフォーム要素
- 26. Javascriptを使用して要素を非表示と表示
- 27. WPFグリッドオーバーフローを非表示にする方法(CSSオーバーフローのような:非表示)
- 28. リストビューを表示/非表示にします。要求時にSectionIndex
- 29. Jquery表示/非表示にする前に要素を右にシフト表示/非表示
- 30. jQueryのヘルプキーアップ時の表示/非表示
これは完璧です。どうもありがとうございました! :) –
私は言及しませんでしたが、あなたは事を微調整するために 'event.wheelDelta'と' event.detail'を調べるべきです。 Firefoxは 'event.detail'を使用し、他のものは' event.wheelDelta'を使用し、これらの値を使用すると、その複合体に行きたい場合には速度制御を知ることができます。このリンクはhttp://www.javascriptkit.com/javatutors/onmousewheel.shtmlに役立ちます – anson
マウスホイールイベントはもう機能しません。現代のブラウザではホイールと呼ばれています。 – netAction