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

当ページのリンクには広告が含まれています。

jQuery Plugin » スクロール » 指定した要素をスクロールしないようにロック「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>

LockScroll

jQueryプラグイン「LockScroll」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）