https://github.com/leaysgur/content-scroller

ページ内の一部分をスクロールできるようにするやつ
https://github.com/leaysgur/content-scroller

Last synced: 24 days ago
JSON representation

ページ内の一部分をスクロールできるようにするやつ

• Host: GitHub
• URL: https://github.com/leaysgur/content-scroller
• Owner: leaysgur
• License: mit
• Created: 2014-08-07T04:04:27.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-02-23T09:42:03.000Z (over 9 years ago)
• Last Synced: 2024-04-15T07:11:57.802Z (7 months ago)
• Language: JavaScript
• Size: 305 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
content-scroller

=======================

ページ内の一部分をスクロールできるようにするやつ

See [Sample](http://labs.lealog.net/content-scroller-sample/)

### 使い方

最低限のサンプルです。

#### HTML

```html



  


  


    ここにそれはもう長い長いコンテンツを

  



```


#### CSS

```css

.scroll-wrap {

  /* 必須 */

  position: relative;

  overflow: hidden;

  /* 必須ですが好きな高さに */

  height: 100px;

}

.scroll-area {

  /* 好きなスタイルに */

}

.scroll-bar {

  /* 必須 */

  position: absolute;

  right: 0;

  /* 必須ですが好きなスタイルに */

  width: 4px;

  background-color: rgba(0,0,0,.5);

}

```

#### JavaScript

```javascript

// 初期化は要素があればいつでもOKです

var scroll = new Scroll({

    scrollWrap: $('#js-scroll-wrap')[0], // jQueryではなく、生のDOMを使います

    scrollArea: $('#js-scroll-area')[0],

    scrollBar:  $('#js-scroll-bar')[0]

});

// これではじめてスクロールできるようになります

scroll.start();

// 使わなくなったらこれを

scroll.dispose();

```

見た目はお好きにスタイリングしてください。

### 初期化オプション

#### options.scrollWrap

スクロールで制御したい要素

#### options.scrollArea

実際にスクロールしたい要素

#### options.scrollBar

スクロールバーとして扱う要素

#### options.disableScrollBar

スクロールバーを使わないなら``true``(デフォルトは``false``)

#### options.startAtBottome

スクロールしきった状態からスタートするなら``true``(デフォルトは``false``)

### 諸注意

- PCのマウスホイール/トラックパッドの移動には対応してません(=PCでは実質使いものにならない)