object-fit: cover; などのサイズをjsで計算する。
div要素をcover表示するときなどに使えるかもしれない。
カテゴリー: JavaScript
[JavaScript] 要素が画面内に表示されているか
getBoundingClientRect() を使うと簡単に判別できるようです。
要素が画面内に表示されている
const rect = element.getBoundingClientRect();
const isInView = 0 < rect.top && rect.bottom < window.innerHeight;
要素が一部でも画面内に表示されている
const rect = element.getBoundingClientRect();
const isInView = 0 < rect.bottom && rect.top < window.innerHeight;
iPhoneではcodepenやiframeで上手く動きません。
時間を計算(日時〜日時)
[js] setTimeout、setIntervalのdelayに24日 20時間 31分 23秒 648 以上を指定すると即実行される
32bitということらしいです。
※11/11追記
サンプルが分かりにくいので変更しました。
setTimeout(() => {
console.log('hoge'); // すぐ実行される
}, 2147483648);
テスト結果
4:3、16:9などのサイズ一覧
Momentテスト用
Feed Dialog テスト
[js] スマートフォンのアドレスバーを、コンテンツの高さが足りないときでも非表示にする(改良版)
前回から改良したので、別記事にしました。
基本的な処理はほとんど変わっていませんが少し改良しています。
- スクロールの判定方法を変更
- アドレスバーが消えたときのイベントが取得できるようになった
iOSのchromeブラウザ判別
とりあえずこれでいけるっぽい
if (navigator.userAgent.indexOf(‘CriOS’) >= 0) {
// 処理
}
ハッシュ変更を検知
ライブラリに依存しないハッシュ変更を検知するスクリプト。
ほとんど出番はないと思われ。
—
2013/1/18追記
CoffeeScriptも少しかじったので用意してみた。
ただしやり始めたばっかりなので不備があるかも。。
現時点で把握している不備と対策です。
・on()が存在しない
→bind()を使う
・off()存在しない
→unbind()を使う