スムーズスクロールとfleXcrollの併用

質問

よろしくお願い致します。

jQueryを使用して、「overflow: auto」を指定している要素内でスムーズスクロール出来る方法を探しており、以下のようなコードを見つけました。

$(document).ready(function(){
var box = $('#contents');
$(document).click(function(event){
var obj = $(event.target);
var anchor = obj.filter('a[href*="#"]');

if (!anchor[0]) anchor = obj.parents('a[href*="#"]');
if (anchor[0]){
var target = $(anchor[0].hash, box);
if (target[0]){
var scrollTop = box.scrollTop();
var dist1 = box.prop('scrollHeight') - box.prop('clientHeight') - scrollTop;
var dist2 = target.position().top - box.position().top;
box.animate({ scrollTop: scrollTop + Math.min(dist1, dist2)});
return false;
}
}
return true;
});
});

↑このコードで「overflow:auto;」を指定している要素内でスムーズスクロールが出来るようになったのですが、スクロールバーを装飾できる「fleXcroll（http://shanabrian.com/web/library/flexcroll.php）」プラグインと併用すると、スムーズスクロールが効かなくなってしまいます。
「fleXcroll」のコードは「http://www.hesido.com/web/flexcroll.js」になる（記述が長くここには書ききれませんでした）のですが、薄識のため何処に問題があるのか分からない状態です。

ちなみにHTMLは、下記のようなコードで使用しています。

<div id="navi">
　<ul>
　　<li><a href="#A">divAへ移動</a></li>
　　<li><a href="#B">divBへ移動</a></li>
　　<li><a href="#C">divCへ移動</a></li>
　　<li><a href="#D">divDへ移動</a></li>
　　<li><a href="#E">divEへ移動</a></li>
　</ul>
</div>

<div id="hoge" style="height:500px; overflow:auto;">
　<div id="A">divAの内容</div>
　<div id="B">divBの内容</div>
　<div id="C">divCの内容</div>
　<div id="D">divDの内容</div>
　<div id="E">divEの内容</div>
</div>

分かりにくい説明で恐れ入ります。
補足説明致しますので、お分かりになる方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。

回答No.1

fujillin · ベストアンサー

＞「fleXcroll」のコードは「http://www.hesido.com/web/flexcroll.js」になる
＞（記述が長くここには書ききれませんでした）のですが
これって、難読化してあるので、わざわざ解読する回答者はいないように思いますけど？？

そのため、以下は中身は見ずに想像でのコメントですが…

自前のスクロールバーで表示するために、ブラウザの自動スクロールをはずしてスクリプトで表示位置を変えてスクロールさせているはずと思います。
それなので、質問者様はoverflow:autoとおっしゃっていますが、それをoverflow:hiddenに変えて、その枠の中でposition:relativeまたはabsoluteの内容を移動させているのではないかと想像します。

この結果、外側の要素のスクロールを制御しようとしても動作しません。
この状態でスクロールするには、内側の要素（内容）のほうのCSSのtop/leftを移動してあげればスクロールしたように見えることでしょう。（実際に行なわれているのは違う方法かも知れませんが）
別のスクリプトで、対象部分を移動させることは可能だと思いますが、その時にスクロールバーの表示と連動しなくなる可能性がありますので、そのあたりの調整が必要かもしれません。
また、移動の方法が変わるので、位置の計算も（原理は同様ですが）調整が必要です。

と言ったあたりを修正する必要があるのではないでしょうか。

圧縮していないコードを入手して提示すれば、奇特な回答者が現れるかも・・・
（改変に関するライセンスの確認などもお忘れなく）

お礼

お礼が遅くなり大変申し訳ありません。
ご回答頂きありがとうございました。
圧縮されたファイルだということを知らずに大変失礼致しました。
圧縮していないコードを手に入れることができそうにないこと、ご指摘頂いたライセンス等の問題もクリアできなさそうなので、今回は諦めようと思います。

不備の多い質問にお答え頂き、本当にありがとうございました。