指定した要素をスクロールしないようにロック「LockScroll」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素をスクロールしないようにロックすることができるプラグイン「LockScroll」を紹介します。
jQueryプラグイン「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>
スポンサーリンク