今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. くるくる回る画像ギャラリー「Rondell」
  3. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  4. 文字数に応じてテキストエリア高さを自動調節「autoexpand」
  5. 画像に拡大・縮小ボタンを「Zoomer」

指定した要素をスクロールしないようにロック「LockScroll」

スポンサーリンク

指定した要素をスクロールしないようにロックすることができるプラグイン「LockScroll」を紹介します。

jQueryプラグイン「LockScroll」

このプラグインを使えば、指定した要素のスクロールをロックし、スクロールできないように設定することができます。

また、スクロールのロックを解除するアンロック・オプションもあるので、解除ボタンを設置するとスクロールのロックとアンロックを制御ができそうですね。

「いつ使うのか?」はちょっとよくわかりませんが、ロック/アンロックのトリガー次第では、サイトにおもしろい効果を付加できるかもしれませんね。

スポンサーリンク

それではデモページをスクロールしてみてくさい。また「ロックを解除」ボタンをクリックした後にもう一度スクロールしてみてください。

「LockScroll」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="LockScrollのデモでーす。">
<title>LockScroll - jQueryプラグイン</title>
<style>
.element {
  width: 400px;
  height: 200px;
  overflow: auto;
}
</style>
</head>
<body>
<h1>LockScroll のデモでーす。</h1>

<h3>ロック</h3>
<div id="demo" class="element">
あああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいい
ううううううううううううううううううううううううううう
えええええええええええええええええええええええええええ
おおおおおおおおおおおおおおおおおおおおおおおおおおお
かかかかかかかかかかかかかかかかかかかかかかかかかかか
ききききききききききききききききききききききききききき
くくくくくくくくくくくくくくくくくくくくくくくくくくく
けけけけけけけけけけけけけけけけけけけけけけけけけけけ
こここここここここここここここここここここここここここ
</div>

<button id="unlock">ロックを解除</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.lockscroll.js"></script>
<script>
$(function() {
  $("#demo").lockScroll(true).scrollTop(100);
  $("#unlock").click(function() {
    $("#demo").lockScroll(false);
   });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)