モーダルを開いている時に背面コンテンツのスクロールを抑制する方法
TAK(@tak_dcxi)です。 モーダルやドロワーメニューを開いている時に背面コンテンツが勝手にスクロールされるとヘイトポイント溜まりがちなので、ユーザビリティ向上のためにも背面コンテンツのスクロールは抑制しておきましょう。 結論 // ドキュメントの書字方向を取得し、縦書きかどうかを判定 const isVerticalWritingMode = (): boolean => { const writingMode = window.getComputedStyle(document.documentElement).writingMode return writingMode.includes('vertical') } // スクロールバーの幅を計算する const getScrollBarSize = (): number => { const scrollBarXSize =
scroll, resizeイベントの負荷を抑制する
Updated 2015.05.29 / Published 2013.11.21 特定の場所までスクロールしたら要素を表示させたり・動かしたり、またはリサイズに応じてレイアウトを再調整したりなど、JavaScriptではscrollやresizeに応じたイベントが頻繁に用いられますが、これらのイベントは断続的に処理を実行することになるので、制作者の意図せぬ形でユーザ側では負荷の高い処理になっているかもしれません。そこで、ちょっとの工夫だけでこれらのイベントの負荷を抑制できるポイントを紹介します。 スクロール時におけるサンプルコード try { //IE9+, Other Browsers window.addEventListener( 'scroll', sample, false ); } catch (e) { //for IE8- window.attachEvent( 'ons
ページの下までスクロールしたときに何らかの処理を実行する例 at softelメモ
ページの下までスクロールしたときに何らかの処理を実行する例 $(window).bind("scroll", function() { scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { //スクロールの位置が下部5%の範囲に来た場合 } else { //それ以外のスクロールの位置の場合 } }); demo ページをある程度下までスクロールしたときに何らかの処理を実行する – デモ 「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。 条件
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今どきのスムーズスクロール(2019年版)
