ページを横スクロールするシンプルなJavaScript : JavaScript
ポートフォリオなどで見かけるシングルページ用のスクリプト。ページを横スクロールするJavaScript(jQuery-1.7.1を利用)。
使い方
JavaScriptとスタイルシートをヘッダで読み込む。
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="app.js"></script> <!-- 2012.12.04 追記 -->
<script src="scroll.js"></script> <!-- 2012.12.04 追記 -->
<script type="text/javascript">
jQuery(function($) {
var scroll = App.namespace('scroll'); <!-- 2012.12.04 追記 -->
scroll.init('scrollarea', 300);
});
</script>
動き
scroll.initの引数で渡されたid(scrollarea)の子要素のページをスクロールする。
<body>
<div id="header">
<h1>Exsample</h1>
<ul id="nav" class="clearfix">
<li><a href="#home">Home</a></li>
<li><a href="#service">Service</a></li>
</ul>
</div>
<div id="scrollarea">
<div id="home" class="page">
<h2>Home</h2>
<p>sed luctus nunc. Praesent eget erat sit</p>
<div class="arrow-right">></div>
<!-- /page --></div>
<div id="service" class="page">
<h2>Service</h2>
<p>Lorem ipsum dolor sit amet, consectetur</p>
<div class="arrow-right">></div>
<div class="arrow-left"><</div>
<!-- /page --></div>
<!-- /scrollarea --></div>
</body>
コメント
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。
はじめまして。
コンテンツを横スクロールする方法を探してたどり着きました。
少し応用して使おうと試行錯誤していたのですが、うまく動作しませんでした。
厳密に言いますとIE８で
メッセージ: オブジェクトでサポートされていないプロパティまたはメソッドです。
ライン: 126
文字: 5
コード: 0
findxfine.scroll.js
とエラー出てしまいます。
「scroll.init = _init;」
の部分だと思いますがなにか代替案はございますでしょうか。
もしよろしければご回答お願いいたします。
コメント by やす — 2012-12-04 @ 4:46 PM
やすさん
コメントありがとうございます。
IE8のエラー確認しました。
いま手元にIE8が無いので検証ができていませんが、
考えられる点を修正してダウンロードできるようにしました。
一度お試しいただけたらと思います。
コメント by findxfine — 2012-12-04 @ 11:23 PM
はじめまして。
Web勉強中の者です。
素敵なポートフォリオを作ろうと思い、たどり着きました。
コンテンツ高さを変える方法はあるでしょうか。
いろいろ試してみたんですが、自分の今の持ちうるスキルではどうにも上手くいきませんでした。
よろしくお願いします。
コメント by ぷしょー — 2014-04-03 @ 2:51 AM
ぷしょーさんコメントありがとうございます。
>コンテンツ高さを変える方法はあるでしょうか。
できると思うのですが、
今時間がなくて対応できません。
コメント by findxfine — 2014-04-07 @ 12:35 PM
ご丁寧にお返事いただき、ありがとうございます。
もう少し、いろいろやってみます。
コメント by ぷしょー — 2014-04-12 @ 8:22 PM