LoginSignup
1
2

More than 3 years have passed since last update.

コンテンツが下からスクロールで表示されるjQueryプラグイン

Last updated at Posted at 2019-11-02

コンテンツが人画面に収まりつつ、スクロールすると次のコンテンツが表示されるプラグインです。

デモページ

デモページ
HTMLのclass="section"ごとに下からズズッと表示される感じです。

コンテンツがウインドウサイズより長くても大丈夫

一つのコンテンツがウインドウサイズより長くてもスクロールで見れるようにしたかったのでそのようになっています。内容量を気にしません。
コンテンツ量が少ないとウインドウ幅いっぱいに要素が広がるようになっています。

実行方法

$('#wrap').scrollContent();

wrapの箇所をスクロール表示したい親要素を指定します。

スクロールバーを非表示にしたい

前途の理由で移動の際にもスクロールバーが出ます。このスクロールバーがない方がいい時は以下のように実行します。

$('#wrap').scrollContent({
   type:'noBar'
});

ナビゲーションのclass(id)を変えたい

ナビにつかうclassを変えたい時もあるかなと思い、オプションでナビゲーションのclass(id)を変更できます。指定しないと.navが適用されます。

$('#wrap').scrollContent({
   nav:'.nav'
});

ダウンロード

ダウンロードはこちらら
webdrawer-kashu/contentScroll

この記事の転載元

コンテンツが下からスクロールで表示されるjQueryプラグイン|WEB Drawer|web制作に関するネタの引き出しサイト

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2