スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得
TextNodeにも使えるgetBoundingClientRect - gifnksmの雑多なメモ
JavaScript（というかDOM? CSSOM?）には getBoundingClientRect という便利なメソッドが用意されています。これを使えば，ある要素のviewport上の座標，つまりブラウザ画面の左上を原点とした座標上での要素の位置を取得することができます。これまでは d:id:gifnksm:20100729:1280429284 のgetOffset関数のように，offsetParentを辿っていく方法で位置を取得していました。また親要素に position: fixed; が指定されている場合などを考慮すると，d:id:gifnksm:20090506:1241630603 のように非常に長い関数を書かざるを得なかったりして，何かと面倒でややこしくて，できるだけ敬遠したい処理でした。複雑な関数を書いても，最終的に任意の文書に対して正しく動作するか結局よくわかりません
iPhoneでscrollTopみたいな事をする
下っ端プログラマーのもがきをつらつらと。 生活や、仕事のおぼえがきや、気になったニュースなどを書いていきます。 iPhoneにscrollTopは無い。 代わりに、pageYOffsetがある。 一番下まで来た場合に何か処理をさせたい場合、scrollTopが無いiPhoneはpageYOffsetを使用するしかない。 ただ、pageYOffsetだけでは不十分。 pageYOffsetは現在の画面の一番上の縦位置が全体のどの位置までスクロールしたかがわかるだけ。一番下に来たかどうかかわからない。 なので、 window.innerHeight を足してやる事で画面下の位置が取得できる。 //画面下の位置取得 var bottomPos = window.pageYOffset + window.innerHeight; //スクロールできる縦の長さ取得 var max = documen
JavaScript まとめ - 画面操作
※ x, y は現在位置を基準とした 相対オフセット。 ※ x, y でスクロール位置のMAX(MIN)を超えた場合は限界まで移動する。
Scroll y 位置を知りたいjQuery.scrollTopを使わずに
Memo です。 スマホ、タブレット専用サイトだと jQuery 使わなくても何とかなりそう。 でも、すっかりjQueryに身も心も奪われてしまい肝心なことなのに分からないことが多すぎ。 Scroll の y 位置もそんなことのひとつ。 またいつもの stackoverflow で答えを見つけた。 JavaScript get window X/Y position for scroll var doc = document.documentElement; var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0); var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
データ ＆ アナリティクス | アクセンチュア
データ分析から導き出されたインサイト無しにAI（人工知能）の活用は始まりません。私たちは、各業界知識とデータ・アナリティクス技術を駆使しデータドリブン経営を強力に支援します。 データ、アナリティクス、AIは企業にとって競合他社との差別化を図るかつてないほど大きな要因になっています。今日の経営幹部が効率を向上しながら新たな収益源を開拓し、新しいビジネスモデルをタイムリーに構築する方法を模索する中、価値を生み出し成長を続ける企業には「データ活用」という共通項があります。私たちは、無数のデータから企業にとって本当に必要なデータを活用するための方法を知っています。 将来を見据えたオペレーション体制を備えている企業の半数以上（52％）は、すでにデータとアナリティクスを大規模に活用しています。データとAIに関する取り組みをビジネス戦略に沿って実施することで投資利益率を迅速に最大化し、最終的にはAIをビ
脱jQuery .height() .width() .offset() .scrollTop() | q-Az
大きさ関係の jQuery のネイティブ書き換えの紹介です。 詳しくは 脱jQuery その1 をご覧ください。 height、width 関連だけでもそれなりに色んな種類があるので整理しつつ行きます。height()、width() に関してはこのページでは「設定」のみ扱います。取得する場合は色々ややこしい話があるので、次回の記事で詳しく場合を分けて説明します。 .height()（高さ設定） $("#main").height(50)書き換え JavaScriptdocument.getElementById("main").style.height = "50px".css() と考え方は同じです。「高さ」を設定するので style を使います。JavaScript の方は "50px" と「px」の単位が入っていることに気をつけます。jQuery の方はあっても無くても自動でやって
Javascriptでスクロール量を取得する時の話 - じゃこscript
今更だけど、自分はパララックスデザインが好きです。 好きなものが流行ってると見る機会が多くなってニヤニヤできるからとってもうれしい。 ちなみにパララックスを導入する時にはjQueryプラグインを使うとめちゃめちゃ簡単に導入できる。 skrollrとか。 でもやっぱり自分の手で実装したい感ある。 なんでもjQueryに頼るのはスマートじゃないし。 というわけでせこせこピュアJSでコード書いてみたら「スクロール量を取得」するところでつまづいたのでメモ。前置きながいね。 スクロール量を取得するには スクロール量を取得するメソッドはいくつか存在する。 document.body.scrollTop window.pageYOffset window.scrollY document.documentElement.scrollTop それぞれブラウザやDOCTYPEでのモード指定(後方互換とかそう
互換モードに対応したスクロール位置取得 pageYOffset, pageXOffsetが使えないとき - 7cc@はてなブログ
かなり無駄があったので修正 2014/09/24 MDNに記載されているのは互換モードに対応していなかったので。 基本的に以下のようになるが、CSS次第で変わる。 詳しくは スクロール位置が取れない htmlやbodyにoverflowを指定するときは注意を参照 browser page-scrolled Quirks Mode body.scrollTop IE8 html.scrollTop IE9 html.scrollTop, pageYOffset Webkit body.scrollTop, pageYOffset Firefox html.scrollTop, pageYOffset 追記： 最近Google Chromeがhtml.scrollTopでスクロール量を返すようになった。しかし、内部的にはbody.scrollTopを返しているだけの模様。何にせよ、pageYO
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() を呼ぶことで、スクロールそのものを止めることもできる。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Scroll Boundary Behavior Module Level 1
http://www.red.oit-net.jp/tatsuya/java/pageof0a.htm
https://qiita.com/ANTON072/items/32ee03c5d23e6bde73df