OS X Lionぽいスクロールバーを実装できてiOSにも対応した Skroll.js

Comments: 12 - Leave a comment

1. ダダ June 13th, 2012 20:55:17

   Reply

   デザインを崩すこと無くスクロールが実現できるので大変重宝させていただいております。
   jQuery 1.7.2では動かないようですが、対応予定はありますでしょうか？

   1. キョロ June 14th, 2012 12:02:33

      .bind(MOUSEWHEEL, function(e) {
      e = e || window.event;
      if(!e.detail && !e.wheelDelta){e = e.originalEvent;}　←追加
      これでPCでも動きました。
      (jquery 1.7.2)

2. コサ April 20th, 2012 17:12:00

   Reply

   同一ページ内に複数設置したいのですが、１つをスクロールすると、もう１つも連動してうごいてしまいます。
   どう記述すればよいでしょうか？

3. nori December 21st, 2011 23:17:28

   Reply

   スクロールイベントに bind はできないですね。
   たしかに出来たほうが便利そうですねー。

   ただこれ、ソースコードを書きなおしたいレベルなので
   アップデートは当分できないと思います。。

4. basabasa.wing December 12th, 2011 21:07:10

   Reply

   すみません。ちょっとツマズイてしまったので、質問させてください。

   $.skrollで要素を指定しますが、指定した要素はスクロール判定はできなくなりますか？

   ちょうど「refreshメソッドのサンプル」のdiv class=”body”部分を、
   $(“div.body”).scroll(function(){
   alert(“a”);
   });
   とか考えているのですが…よろしくおねがいします。

5. todo September 18th, 2011 15:06:37

   Reply

   jquery mobileと併用するとスクロールバーが表示されません。
   jquery.mobile.css
   と衝突しているのだと思いますが、、。javascriptの衝突問題があの手この手で解消されてきた今、今度はcssのぶつかりが増えてきましたねえ。

   1. nori September 19th, 2011 02:32:01

      そうですねーjQuery mobileは個人的に使わないので未検証でしたね。。
      そもそもclass名がストレートすぎたので変えてみます。

6. Taro.com August 3rd, 2011 22:16:00

   Reply

   github のサンプル index.html をカスタマイズして実際に使うときと同じ状況の検証をしてみたスクリプトの部分です。

   var skroll = $.skroll(“div.txt”, {
   margin: “2em auto 0″,
   width: 300,
   scrollBarSpace: 0,
   scrollBarBg: true
   });
   $(‘#btn’).click(function(){
   $(‘.txt’).append( $(‘.txt’).html() );
   skroll.refresh();
   });

   これだと scrollOuter の高さが 更新したコンテンツの高さになってしまうようです。 どこかが間違っているのでしょうか？

   1. nori August 9th, 2011 00:21:38

      オプションにheightを指定してみてもだめでしょうか？？

7. Taro.com August 1st, 2011 13:52:58

   Reply

   他にもカスタムスクロールバーはあるようですが、一番カッコイイと思ったので使わせてもらっています！

   実際使ってみて大変簡単に実装もできて助かっているのですが、Ajaxなどでスクロール対象のコンテンツの高さが変わったときにスクロールバーも変わったコンテンツと連動させるにはどうやったらいいのでしょうか？

   ソースを読んでみたのですが力不足なため解決できませんでした。。
   お手数ですが よろしくお願いします。

   1. nori August 1st, 2011 14:43:35

      さっきちょうど記事を更新したところなのですが、reresh()メソッドを使うとスクロールコンテンツを更新できます。

      実行方法が少し変わるのですが

      var skroll = $.skroll("div.body", {
        scrollBarBg: true
      }); // 要素、オプションの順
      
      skroll.refresh(); // 任意のタイミングで

      のようにAjax読み込みと描画が終わったあとにrefresh()メソッドを実行してみてください

   2. Taro.com August 1st, 2011 15:28:03

      素早いご返事ありがとうございます。

      早速 試してみます！