smoothscrollがfirefoxで正常に動作しない

[新着] Webテンプレートを仮オープンしました

0   名前： ぎんじ ： 2007/04/30（月） 13:26  ID:mhqgBLS6 sub-Ds
以前、smoothscrollを用いてページ内をゆっくり移動させる方法で質問をしたことがあります。
いただいた回答をもとに試行錯誤を繰り返し、どうにか無事動作するようになったのですが・・・

自分がIE環境にあるため、firefoxなどについての考慮が抜け落ちていました。
実際firefoxで確認してみると、デザインが信じられないほど崩れていました。
手直しをするうちに、今までわからなかったこともわかってきましたし、無事ほぼ同等の見え方になりました。

最後に残っているのは、smoothscrollのがきがきした動きです。
スムーズにスクロールせず、がきがきがき、と動きます。　
見ていて非常に不愉快な動きです。
観察していると、
どうやら<a name="xxxx" />などと指定してある箇所を通過する際に、
スピードが遅くなることから、がきがきに見えているようです。

この問題は完治不可能でしょうか？

参考ＵＲＬ：　http://slightlyblue.com/blog/2006/08/javascript_smoothscroll2.html



1   名前： 匿名 ： 2007/04/30（月） 13:26  ID:aQuF.kCj sub-Cz
現象が生じるページそのものを見せてもらうか、最小限のテストコードを出してもらった方が早いと思う。

とり急ぎ参考 URI を拝見した感想としては、ミリ秒単位で document.getElementById を何度も呼び出すのは無駄すぎるかと。getElementById は最初に 1 回実行して、ノード参照を保持すれば十分（メモリリークの心配もなさそうだし）。
2   名前： 匿名 ： 2007/04/30（月） 13:26  ID:aQuF.kCj sub-Cz
>>1 を投稿した後で「しまった！」と思ったのだけど、まずは作者に問い合わせるべき。

書いてしまったものは仕方がないので、

> getElementById は最初に 1 回実行して、ノード参照を保持すれば十分

に関しては補足 orz。

追加：
SmoothScroll = {
    element : null,
    parent  : null,
scrollTo : function( element, parent, options ){
    this.element = document.getElementById (element);
    this.parent  = document.getElementById (parent);

その後、スクリプト内に出現する以下の項目を全て置換。
this.$(element)  --> this.element
this.$(parent)   --> this.parent
this.$(parentid) --> this.parent

若干だが速くなると思う。実際にベンチマークをとってないからガセネタかもしれない。
3   名前： ぎんじ ： 2007/04/30（月） 13:26  ID:mhqgBLS6 sub-Ds
見ていただこうと思って、テキストやら画像やらごっそり落としてみました。
（形は崩壊してますが無視してください・・・）

www.artycrafty.net

そうしたら、普通に動くようになりました。

つまり、重かったということなのでしょうか。　しかし、実際、軽いです。
それとも、（そうとも思えないのですが）形が複雑すぎたとか。
動きをおかしくする要素として、どんなことが考えられるのでしょうか？

ぜんぜん理解できませんが（初ＨＰです）、
いただいた情報、こねくりまわしてみます。　→　匿名さん
ありがとうございます！


4   名前： ぎんじ ： 2007/04/30（月） 13:26  ［URL］  ID:mhqgBLS6 sub-Ds
IE、NN、Operaでは正常に動作しますが、firefoxではがしがしになります。
同じ効果の別のスクリプトを導入してみましたが、
やはりfirefoxだけがしがしでした。
下記のサイトでは、動作が確認されているのですが・・・

私には、JavaScriptについては貼るだけの知識しかないので、
匿名さんにいただいたアドバイスは、時間をかけて消化していこうと思います。

当座はとりあえず、firefoxだったらこのスクリプトは読み込ませない、という対応をしようと思いますが、以下をどう書き換えたらよいでしょうか？　アドバイスをお願いできませんか。

<SCRIPT TYPE="text/javascript">
<!--
if(browser == "Firefox"){
smoothscrollを読み込まない
}
// -->
</SCRIPT>
5   名前： ぎんじ ： 2007/04/30（月） 13:26  ［URL］  ID:mhqgBLS6 sub-Ds
下記のサイトとは、こちらです。　失礼しました。
6   名前： 匿名 ： 2007/04/30（月） 13:26  ID:cnBmC8vd sub-Cz
亀レスで申し訳ない。

>>3
> 動きをおかしくする要素として、どんなことが考えられるのでしょうか？

まず、Netscape と Firefox は基本的に同じエンジンを積んでいるのだから、よほどバージョンが違わない限り、結果が異なることは少ない（まあ確かに、未だに Netscape 7 を使っている人が多い一方、最近の Firefox は重量化しているのだが）。

だから現状、Firefox 一般の問題と言うより、ぎんじさんが使用している Firefox、もしくはぎんじさんのページに特有の問題ではないか、としか言えない。

だから、「これが Firefox 一般の問題なのかどうか」を確認するために、>>1 で『現象が生じるページそのもの』を見せてくれ、とお願いしたわけ。配布サイトを見せられても、正直あまり意味がない。


>>4
> 当座はとりあえず、firefoxだったらこのスクリプトは読み込ませない、という対応をしようと

したがって、現状では「Firefox 全部」を対象から外す理由に乏しい。まあ、スクリプトが動作しなくても閲覧に支障はないから、全然構わないのだけど。

で、実際のところ、Firefox だけを対象から外すのは難しい。まあ、navigator.userAgent 情報を信用するのであれば、この単語で検索すればサンプル自体はたくさん見つかるだろう。

あと、Firefox にスクリプトを読み込ませない場合、>>0 のように組み込みイベントを直に書くタイプのものでは、ボタンを押した時点でのエラーが避けられない。だから、ボタンそのものをスクリプトで書き出すよう、改造する必要もある。

と言うわけで、かえって面倒な気がした。あまり気にしない方が良いと思う。
<script type="text/javascript">
if (('opera' in window) || ('konqueror' in window) || ('ActiveXObject' in window))
{
    // Opera、Safari、IE のみ実行（Netscape、Firefox、SeaMonkey、Camino などは非実行）
    document.write ('<script type="text/javascript" src="script.js"><\/script>');
}
</script>
7   名前： ぎんじ ： 2007/04/30（月） 13:26  ID:mhqgBLS6 sub-Ds
匿名さん、何度もありがとうございます。
素人の私が想像するほど簡単にはいかないことも多いんですね。　→ボタンを押した時点でのエラー

一時、問題のページを見ていただこうと思い、しかしそのまま公開する勇気がなくて、
個人情報や余計なもの削り落としてアップしました。　→www.artycrafty.net
参考ＵＲＬのところに載せるのを忘れるという間抜けっぷりでしたが。

不思議だったのは、そぎ落とした後の超スリムな形だと、普通に動作したことです。
それがもう気になって気になって。　いったいなぜなのかと。

しかし、基礎知識のない私がいくら血眼で検索をしてみたところで、結局わかりませんでした。
匿名さんのおっしゃるとおり、私のページに特有なものなのではないかと思います。
とにかく「汚い」はずなので・・・。　

アドバイスの通り、あまり気にせず、時間のあるときに手を入れていこうと思います。
いろいろと、ありがとうございました。　マタよろしくお願いしますー。




一覧へ戻る