» スマホでスクロールを禁止させる方法 | negic
軽めのjQuery Advent Calendar 2012の24日目の記事です！ PCサイトでスクロールを禁止させるには、bodyにoverflow: hidden;をかければスクロールができなくなるが、スマホサイトでは、一部Android端末では効くが、iOSではスクロールができてしまいます。 スマホでスクロールを止めるには、jQueryを使うと便利です。 スマホの独自イベントである、touchmoveイベントを切ればスクロールを止めることができます。 方法は下記のとおりです。 $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); あるタイミングでスクロールさせたくなったら、off()すればいい。 $(window).off('.noScroll'); イベント名に、.noScrollとあるが、
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
【Javascript】ブラウザの表示領域サイズ取得について - すたら日記
最終更新: 2018年8月2日 目次 結論 実験 実験結果一覧表 古いブラウザでの実験結果 結論 以下のように求められます。 ※ IE6, 7, 8は対象外です。 1. 表示領域の幅 (スクロールバー含まず) = document.documentElement.clientWidth; $(window).width(); // jQuery 2. 表示領域の高さ (スクロールバー含まず) = document.documentElement.clientHeight; $(window).height(); // jQuery 3. 表示領域左上のX座標 (文書左端から表示領域左端までの距離) = window.pageXOffset; window.scrollX; // pageXOffsetと同等(エイリアス) $(window).scrollLeft(); // jQuery
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E
ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。 そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。 ↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。 導入方法は簡単でJavascriptを導入し、「このページの先頭へ」リンクにonClickイベントを仕込むだけです。 仕込むJavascriptはこちら。ちなみに元ネタは「A (slightly) better technique for “Back to Top” links.」です。ページ内に書き込んでも、外部ファイルにしてもいいでしょう。 function backToTop() { var x1 = x2 = x3
スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法
今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;) たとえば、Yahooさんとかがやっているんですが、 「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。 Yahoo! JAPAN （スマートフォンサイト） （Yahooさんの手法とは違うかもしれませんが） その方法を紹介します。 僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。 そもそも、iOSのSafariやAndroidの「ブラウザ」は、 ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、 URLバーが引っ込む仕様のようです。 （あくまで推測。ページ内リンクなどで、そうなるのが根拠です。） まぁ、これのなにがいいのかというと、 ページの表示範囲を少し広く見せられる。 ってところでしょうか。 やり方は簡単です。 JavaScriptでWin
オブジェクトの位置と大きさを取得する方法｜JavaScript Tips
ホームページ内にあるオブジェクト（ボタンなど）の位置を取得するには offsetLeft 、offsetTop 、大きさを取得するには offsetWidth 、offsetHeight で取得できます。 /**************************************************************** * 機 能： オブジェクトの位置と大きさを取得 * 引 数： オブジェクト ****************************************************************/ function getObjSize(obj) { var x = oj.offsetLeft; var y = oj.offsetTop; var w = oj.offsetWidth; var h = oj.offsetHeight; }
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」:phpspot開発日誌
スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」 2010年11月10日- Amit Patil's Blog スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」。 サイドに常に表示されている「Follow Me」みたいなツイッターのフォローボタンは最近よく見かけますね。 これをjQueryで簡単に実装してしまおうというもの。 使い方は次のようにオプションを渡してあげるだけです。 $(function() { $("body").sidebar({ text : "Follow Me", // 表示テキスト size : "30px", // 幅 length : "200px", // 高さ margin : "130px", // マージン p
スムーズにスクロールしないjQueryプラグイン「jDTScroll」 - Rewish
ページ内リンクでスクロールをスムースにするスクリプトは良くありますが、アレってもっとスムーズにスクロール出来ないのかなーとか思いますよね。僕は思います。 もっとスムーズにするのは僕には難しいので、普通のスムーススクロールがスムーズに感じられるように、スムーズにスクロールしないjQueryプラグインを作りました。 ダウンロードとデモ jdtscroll.js デモを見る 導入方法 1. jQueryとjDTScrollを読み込む <script src="jquery.js"></script> <script src="jdtscroll.js"></script> 2. 実行する $() で対象にする要素を指定します。ページ内リンクなのでフラグメント識別子が付いてるっぽいアンカーを指定するのがいいですね。 jQuery(function($) { $('a[href^="#"]').jd
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll Effects
http://moto-mono.net/2009/05/18/page-scrolling-with-jqueryeasing.html