ページ内リンクへの移動時にスクロール位置が固定ヘッダーと被らないようにする方法 - yuhei blog
追記： IE以外の主要ブラウザでは scroll-margin-top が利用できる。 固定ヘッダーがあるサイトだと、ページ内リンクをクリックしたときに対象の要素が固定ヘッダーと被ってしまうことがある。 固定ヘッダーがあるサイトの例としてVue.jsとかBootstrapのドキュメントを見ると、この問題は起こらないようになっていた。調べてみるとそれぞれ同じようなやり方で問題を回避している。 メジャーな手法なのかなと思ってググったらHash Tag Links That Don’t Headbutt The Browser Windowというドンピシャな記事があった。すでに不要になった古いハックとかにも言及していて冗長だったので、メモ代わりにこの記事に書き直しておく。 ページ内リンクへの移動時のスクロール位置は、対象の要素の座標の上端になる。なので単にpadding-topで余白を作って調整
Dynamics.jsをReact.jsで使う - yuhei blog
物理法則に基づいたアニメーションを実装できるライブラリのDynamics.jsをReact.jsで使ってみた。 基本的にJSのアニメーションライブラリはDOMを直接操作するけど、React.jsを使う場合は実際のDOMと仮想のDOMとの整合性が崩れてしまうのでそれは推奨されない。 なので、アニメーションする値をstateで管理してやってみた。 import React from 'react'; import dynamics from 'dynamics.js'; class Box extends React.Component { constructor(props) { super(props); this.state = { x: 0, y: 0 }; } componentDidMount() { dynamics.animate(this.state, { x: 200, y
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
