こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

スムーズスクロールと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>


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

投稿日時 - 2011-12-15 12:59:45

QNo.7191089

すぐに回答ほしいです

質問者が選んだベストアンサー

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


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

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

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

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


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

投稿日時 - 2011-12-15 21:36:23

お礼

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

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

投稿日時 - 2011-12-17 22:13:02

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問