www.npmjs.com github.com これ便利。 import { Element, Link as ScrollLink } from 'react-scroll' <ScrollLink to="section" smooth={true} duration={500}> TextText </ScrollLink> <Element name="section"> Section </Element> これでScrollLink to="section"を押下時にスムーススクロールでElement name="section"まで遷移してくれる。 import { anima…
github.com （とかの約物を半角に出来るフォント。便利。 で、10日前に3.4.0がリリースされました。マイナーアップデートですね。 なので開発環境もアップデートしてみる…と、なんとそのままでは動きません。おそらく、Scss使ってるならCSSがビルドできなく…
iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。 また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリア…
って思うじゃないですか。で、探したら qiita.com あーこれ！！まさにこれ。 だいたい修正前と修正後をスクショして貼るとか、テーブルにして横並びに出来ると見やすいし便利。
よく要素をopacityで消したりすると思うのですが、opacityで消すと要素は残るのでタブで移動とかするとカーソルがあたってしまうのです。なので、アクセシビリティ気にする必要あるのであればopacityでは厳しい。 なので、その場合はカーソル当たらない状態…
developer.mozilla.org matchmediaありますよね。上記を見てIE11も対応しているので油断していました。 window.matchMedia(`screen and (max-width: 768px)`).addEventListener('change', () => { }); 上記のようにmatchmediaの閾値を検出するのをaddEventLi…
qiita.com この記事が参考になります。 throttleを使うと、何秒ごとにイベントを起こす、のように出来ます。 this.elms.forEach(elm => { window.addEventListener( 'scroll', throttle(() => { elm.style.left = `-${pageXOffset}px`; }, 20) ); }); 上記の…
qiita.com 上記の記事が参考になります。 qiita.com のように、高さ取得したかったらoffsetHeightとか使うと思いますが、これ丸めちゃって整数になるんですね。まあだいたい計算出来れば良いならそれで良いのですが、 tech.motoki-watanabe.net でparseFloat…
qiita.com const elm = document.querySelector('.elm'); const style: CSSStyleDeclaration = window.getComputedStyle(elm); const lineHeight = style.lineHeight; のように、して、実際に計算された後のCSSの値をとってこれます。 こちらの結果は21pxの…
あー PCは Google Chrome ですか？だとすると、時間表示(タイムゾーン)がおかしくなるケースが発生しているとか…(原因調査中?)https://t.co/oGtvIR73ANだとすると、他のブラウザか端末で購入しておくのもよいかな…と。— PKS|通りすがり (@JustApasserby00) 2…
Safariで、 .layer1 { transform: rotateX(45deg) } .layer2 { z-index: 1; } rotateXさせている.layer1の上に.layer2を乗せたい時。 Chromeなどでは問題なかったのだが、Safariではなんと、.layer1が上に来る。 どうやら、Safariではz-indexよりtransformの…
どういう状況の話かと言うと、 num && ( <Text>{list[num]}</Text> ) のように、型がnumberの変数numが入っていたらlist[num]を描画したい、という状況。 で、numに1とか入ったら意図通り<Text>list[1]</Text>が描画されるのだけど、numに0が入ると、<Text>list[0]</Text>ではなく、なぜか0だけ描画…
cpoint-lab.co.jp React Hook Formとyupでフォームにバリデーションかけてます。 で、問題は、inputのtypeがnumberで、yupではnumber or nullでバリデーションかけたいとき。 yup.number() yup.number().nullable() だと、数字はいけますが、nullが入りませ…
web.dev VirtualScrollはパフォーマンスめちゃ上がるらしい。けどなんだ仮想スクロールって。 qiita.com つまり、見えている範囲だけスクロールイベントを起こす、のようなものらしい
qiita.com teratail.com scrollイベントを動かしたいが、目的達成したら消したい。で、また目的が出来たら動かしたい。 const closeFunc = () => { isOpened = false; // NOTE: scrollイベントを消す target.removeEventListener("scroll", closeFunc); }; t…
