ページを横スクロールするシンプルなJavaScript : JavaScript

Pocket

ポートフォリオなどで見かけるシングルページ用のスクリプト。ページを横スクロールするJavaScript(jQuery-1.7.1を利用)。

» Demo
» GitHub
» ダウンロード

使い方

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">&gt;</div>
        <!-- /page --></div>

        <div id="service" class="page">
            <h2>Service</h2>
            <p>Lorem ipsum dolor sit amet, consectetur</p>
            <div class="arrow-right">&gt;</div>
            <div class="arrow-left">&lt;</div>
        <!-- /page --></div>
    <!-- /scrollarea --></div>
</body>

コメント


  1. はじめまして。

    コンテンツを横スクロールする方法を探してたどり着きました。
    少し応用して使おうと試行錯誤していたのですが、うまく動作しませんでした。

    厳密に言いますとIE8で

    メッセージ: オブジェクトでサポートされていないプロパティまたはメソッドです。
    ライン: 126
    文字: 5
    コード: 0
    findxfine.scroll.js

    とエラー出てしまいます。

    「scroll.init = _init;」

    の部分だと思いますがなにか代替案はございますでしょうか。
    もしよろしければご回答お願いいたします。

    Comment by やす — 2012-12-04 @ 4:46 PM

  2. やすさん
    コメントありがとうございます。

    IE8のエラー確認しました。

    いま手元にIE8が無いので検証ができていませんが、
    考えられる点を修正してダウンロードできるようにしました。

    一度お試しいただけたらと思います。

    Comment by findxfine — 2012-12-04 @ 11:23 PM

  3. はじめまして。
    Web勉強中の者です。

    素敵なポートフォリオを作ろうと思い、たどり着きました。
    コンテンツ高さを変える方法はあるでしょうか。

    いろいろ試してみたんですが、自分の今の持ちうるスキルではどうにも上手くいきませんでした。

    よろしくお願いします。

    Comment by ぷしょー — 2014-04-03 @ 2:51 AM

  4. ぷしょーさんコメントありがとうございます。

    >コンテンツ高さを変える方法はあるでしょうか。

    できると思うのですが、
    今時間がなくて対応できません。

    Comment by findxfine — 2014-04-07 @ 12:35 PM

  5. ご丁寧にお返事いただき、ありがとうございます。

    もう少し、いろいろやってみます。

    Comment by ぷしょー — 2014-04-12 @ 8:22 PM

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数