Angular v6.1で導入されるRouter Scrollerの紹介 - 余白
こんにちは、lacoです。 Angularの次のマイナーアップデートで、久しぶりに新機能らしい新機能が増えます。 その名もRouter Scrollerです。 長くAngularを使っている人には涙が出るほど嬉しい待望の機能です。 この記事ではRouter Scrollerの紹介と、来週のbeta.1まで待てない！今すぐ試してみたい！という奇特な方のために、最新のビルドで試す方法も紹介します。 Router Scroller Router Scrollerは、Angular Routerにスクロールに関連する機能を与えるものです。 Router Scrollerを使うと、次のようなことができます。 ブラウザバックしたときに遷移前のスクロール位置に復元する #foo のようなフラグメント付きのURLで、対応するIDを持つ要素まで自動でスクロールする どちらも、静的なHTMLページであればブラ
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得
あおざしからり
美味しい、楽しい、おもてなし お米のお菓子 “あおざしからり” 厳選素材をからりと揚げて、 アイデアあふれる味つけをしたら 新感覚のあげもちになりました。 あおざしからりで和菓子をもっと、 美味しく、楽しく、新しく！ あおざし（青挿）とは、枕草子の一節に記された、 日本の書物に初めてあらわれるお菓子の名前です。 RICEお米の美味しさ 上質な原料米「ミヤコガネ」を使用。 その美味しさを100%引き出すために いくつもの工程をかけて ひとつひとつ丁寧につくっています。
スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
Passive Event Listeners によるスクロールの改善 | blog.jxck.io
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。 このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。 今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、 Scroll Event にイベントリスナを登録する。 典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。 場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。
History API - Scroll restoration | Blog | Chrome for Developers
Using the History API to manage your URLs is awesome and, as it happens, a crucial feature of good web apps. One of its downsides, however, is that scroll positions are stored and then, more importantly, restored whenever you traverse the history. This often means unsightly jumps as the scroll position changes automatically, and especially so if your app does transitions, or changes the contents o
Ember.jsの無限スクロールの改善 - ワザノバ | wazanova
http://eviltrout.com/2014/01/04/hiding-offscreen-ember.html1 comment | 0 pointsDiscourseのRobin Wardが、Ember.jsで無限スクロールのパフォーマンスを改善させた取組みについて紹介しています。 Long Lived Applications Discourseは無限スクロールを多用している。投稿数の多いトピックを閲覧している際に、ブラウザのviewportの終わりに近づくと、サーバから非同期に新しい投稿が読込まれる。短いトピックについては、DOMにコンテンツを追加することはパフォーマンスの問題にはならない。最近のブラウザは、モバイルであっても、数百の投稿はレンダリングできる。しかし、数千件の投稿があるトピックを閲覧する時は、ブラウザの動きが不安定になり、クラッシュすることもあった。 Cloa
【後編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
※この記事はBackbone.jsでつくるMVPなUIパターン【スクロールスパイ】前編からの続きの後編です。 ContentView 継承 ContentViewは文章を表示し、自身の管轄しているスクロール範囲を知っているコンポーネントです。Backbone.Viewを継承して実装します。 var ContentView = Backbone.View.extend({}); テンプレート UI表示用のテンプレート関数をNavViewと同じように定義しておきます。 <script type="text/template" id="ui-scroll-spy-content-template"> <div class="scroll-spy-content"> <%= content %> </div> </script> var ContentView = Backbone.View.ex
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mynameismatthieu.com - contact with domain owner | Epik.com