Follow Us.RSS

2013年9月2日(月)自動スクロールするブックマークレット

  • 見ているページを自動スクロールするブックマークレットを作ってみました。iPhone などでも動きます!

  • (2013年9月3日(火) 午前0時54分14秒 更新)
  • このエントリーをはてなブックマークに追加

ながらブラウズに最適!

友人がこういうのほしいと言っていたので作ってみました。PC では画面をマウスでドラッグすると、ドラッグしたスピードで自動スクロールが始まります(ドラッグの向きはタッチと同じ「ナチュラル」です)。iPhone や Android では画面を指先でなぞります。クリックまたはタップでスクロールが止まります。

自動スクロール
↑上リンクをブックマークバーにドラッグ&ドロップするか、右クリックからブックマークに追加してください。もしくは、下記コードをブックマークにコピーします。
コード
javascript:(function(){var%20a={pageX:function(){return%20self.pageXOffset||document.documentElement.scrollLeft},pageY:function(){return%20self.pageYOffset||document.documentElement.scrollTop},run:function(){t=this;var%20b=("createTouch"%20in%20document&&navigator.userAgent.search(/iphone|ipad|android/i)!=-1)?true:false;if(b){self.addEventListener("touchmove",function(c){c=c||event;if(b&&c.touches){c=c.touches[0]}t.ey=c.clientY},false)}else{self.addEventListener(((typeof%20document.onmousewheel=="undefined")?"DOMMouseScroll":"mousewheel"),function(){if(t.i){clearInterval(t.i)}t.i=null},false)}self.addEventListener(((b)?"touchstart":"mousedown"),function(c){c=c||event;if(b&&c.touches){c=c.touches[0]}if(t.i){clearInterval(t.i)}t.i=null;t.sy=c.clientY;t.st=(new%20Date()).getTime()},false);self.addEventListener(((b)?"touchend":"mouseup"),function(i){var%20f=(b&&i.touches)?t.ey:(i||event).clientY;var%20h=t.sy-f;var%20d=(new%20Date()).getTime()-t.st;if(d<200||(h>-20&&h<20)){t.s=null;t.w=null}else{var%20g=h/d;var%20c=parseInt(d/h);if(c<0){c=-c}t.w=(c>10)?c:10;t.t=t.pageY();t.s=parseInt(g*t.w)||((g>0)?1:-1);if(t.i){clearInterval(t.i)}t.i=setInterval(function(){t.t+=t.s;var%20l=t.t;var%20j=self.innerHeight||document.documentElement.clientHeight;var%20e=document.documentElement.scrollHeight-j;var%20k=true;if(t.s<0){if(l<0){l=0;if(t.t<-j){t.t=e;l=e}else{if(t.pageY()<=l){k=false}}}}else{if(l>e){l=e;if(t.t>e+j){t.t=0;l=0}else{if(t.pageY()>=l){k=false}}}}if(k){self.scrollTo(t.pageX(),l)}},t.w)}},false)}};a.run()})();

iPhone の Safari などでは、iCloud 経由で PC のブックマークと同期するか、次のようにします。

  1. とりあえずこのページを共有ボタンからブックマーク。
  2. 上記コードを選択してコピー。もしくはこのリンク→ iPhone コピー用 自動スクロール を長押ししてコピー。
  3. ブックマークを開いて、追加したブックマークを「編集」。
  4. 名前を「自動スクロール」などに変更し、URL 欄に上記コードをペースト。上記リンクからコピーした場合は最初の「http://」を削除。

友人がこういう需要はあるんだと力説していましたが、確かに、なにかを食べながら記事を読んだり、楽譜を演奏スピードにあわせてスクロールさせたり、いろいろ使い道はありそうです。自分でも記事を読むのにちょっと使ってみました。案外便利ですね!

iPhone で使っているところ(動画)

で、アイディアを提供してくれた友人が、ブックマークレットをたいそう気に入ってくれて、使用動画を送ってきてくれました(笑)。

ブックマークから「自動スクロール」を選択すると、スワイプの速度に合わせて自動スクロールがはじまることがわかります。上から下へも、下から上へも自動スクロールします。最後までスクロールしたら、ページトップまたはページ下端に戻ります。自動スクロールを止めたいときは軽くタップするだけです。

一度止めてもスワイプで再開できるのが便利です♪

関連記事

更新情報

最近の記事

RSS

カレンダー

2013年9月
1234567
891011121314
15161718192021
22232425262728
2930
このページのトップへ