
jQueryでウィンドウ内のスクロールを禁止する
普段はあまり使わないかと思いますが、特定の間だけスクロールさせたくない等の場面で使えるかと思います。jQueryを使うことで実現できたので備忘録としてメモ。
一応、前提条件として「no-scroll」というclassが付与されてる要素がある場合にスクロール制御がかかるようになっています。このno-scrollのclass切り替えについては適宜行なってください。
いかがでしょうか、今回のケースの使い道は非常に限定されますが必要なときは試してみてはいかがでしょうか。 (参考にさせていただいたサイト) Javascriptでスクロールを一時的に禁止する方法(PC・スマホ対応)
// PCでマウスホイールでのスクロール操作の制御
$(function(){
if($(".no-scroll").length) {
$(window).on('wheel',function(e){
e.preventDefault();
});
} else {
$(window).off('wheel');
}
});
// モバイル端末でのタッチスクロール操作の制御
$(function(){
if($(".no-scroll").length) {
$(window).on('touchmove.noScroll',function(e){
e.preventDefault();
});
} else {
$(window).off('.noScroll');
}
});
// 全てのスクロール操作の制御(ウィンドウ表示域で固定)
$(function(){
if($(".no-scroll").length) {
$("body").css('overflow','hidden');
} else {
$("body").css('overflow','auto');
}
});
preventDefault()でデフォルトの動作を無効にしています。スクロール操作を許可する場合にはoff()でイベントハンドラを削除してデフォルトの動作に戻しています。スクロールを完全に制御したいときは、bodyにoverflow: hidden;を指定して、ウィンドウ表示域を超えた分を非表示にしてスクロールができないようにしています。
いかがでしょうか、今回のケースの使い道は非常に限定されますが必要なときは試してみてはいかがでしょうか。 (参考にさせていただいたサイト) Javascriptでスクロールを一時的に禁止する方法(PC・スマホ対応)
categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)