iOSでスクロールイベントを取得する
iOSでスクロールに合わせて処理を行おうと思った場合、スクロールイベントがスクロール完了しないと発生しない問題があります。 iScrollを使って疑似的に実装する方法がありますが、色々と別の問題が発生することがあるのであまり使いたくはありません。 何か他に方法が無いか調べてみたところ、参考になりそうな記事を見つけたので試してみました。 サンプルコード ページの一部でならJavaScriptが動作するらしいので、まずは参考サイトの説明を見ながら、スクロール中にスクロール位置を取得するサンプルを作成してみました。 HTML <div id="scrollTop"></div> <div id="wrapper"> <div id="contents"> コンテンツ内容 </div> </div> CSS #scrollTop { position: fixed; top: 0; left: 0
2015年10月度のflexboxの書き方 - Web Design Note
2015-10-31 2015年10月度のflexboxの書き方 CSS3 １年ぶりに業務でコーディング・・・が、早速つまずく。「display:flexは、仕様やら、OSやら、端末やら、いろんなものがコロコロ変わったみたいだけど、今はどう指定すれば良いの？」ってことで、flexboxの書き方を調べました。 ブラウザのサポート状況などから まずは、先にやってくれてる人がいないかネット検索。比較的新しめの記事がこちらでした。 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】 コリスでは各プロパティを図で詳しく説明してくれています。 CSS3 Flex
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】
【参考ソース】 .foo { display:-webkit-box;/*--- Androidブラウザ用 ---*/ display:-ms-flexbox;/*--- IE10 ---*/ display: -webkit-flex;/*--- safari（PC）用 ---*/ display:flex; -webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/ -ms-flex-pack:justify;/*--- IE10 ---*/ -webkit-justify-content:space-between;/*--- safari（PC）用 ---*/ justify-content:space-between; } 【解説】 ２～５行目 Flexboxを作るための指定です。 ６～９行目 左からflexアイテムを並べて余白があれば、そ
Memo, iOS, Androidブラウザのアドレスバーを消す方法
スマホサイトで上の方にどかんと居座ってじゃまなブラウザのアドレスバー(Address bar)URLバー(URL bar)を消す方法。 JavaScriptを使うしか方法が無いらしい。 JavaScript(jQuery使用) (functino (window, $) { $(window).on('load', function () { setTimeout(scrollTo( 0, 1), 0); }); }(window, jQuery));
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
