- PR -

XHTMLにするとbodyのonscrollが動かなくなる

1
投稿者投稿内容
カタナ
大ベテラン
会議室デビュー日: 2006/05/25
投稿数: 110
投稿日時: 2006-10-23 15:03
いつもお世話になります。現在vb.net(2003)で開発をしています。
全て、HTMLからXHTMLに変更しないといけなくなり、1から2に変更しました。
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
その結果bodyタグのonscrollイベントが動かなくなってしまいました。
解決方法はあるのでしょうか？
よろしくご教授お願いいたします。
かずくん
ぬし
会議室デビュー日: 2003/01/08
投稿数: 759
お住まい・勤務地: 太陽系第三惑星
投稿日時: 2006-10-23 15:19
XHTMLの属性にonscrollってあります？ >識者の方

また、bodyで使用できるのは、onload, onunload, + 属性集合Events(onclick, ondblclick , onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown , onkeyup)
だけっぽいんですけど。

以下、つかえるという前提で、
bodyの子要素としてdiv一個挟み、そこにonscroll記述したらどうなるだろう？
想馬
大ベテラン
会議室デビュー日: 2003/05/29
投稿数: 245
お住まい・勤務地: 神奈川・東京
投稿日時: 2006-10-23 15:29
onscrollはInternet Explorer限定のJavaScriptのイベントハンドラだった気がします。
_________________
己への戒め

「活動的な馬鹿より恐ろしいものはない」 by ゲーテ
カタナ
大ベテラン
会議室デビュー日: 2006/05/25
投稿数: 110
投稿日時: 2006-10-23 15:32
かずくんさん返信ありがとうございます。
実は↓のページの下から２番目のロジック(はっちんさんのレス)を利用してプログラミングしていました。
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=28438&forum=7&6

その結果、xhtmlにすると
①BODYにロードとスクロールのイベントを登録する。
<body onload="LoadEvent()" onscroll="ScrollEvent()">
のonscroll="ScrollEvent()が動かなくなってしまいます。

BODYのonloadはhtmlでは利用できるが、xhtmlでは利用できないのでしょうか？
その場合、どうやって解決してやればいいのかが分かりません。

かずくん
ぬし
会議室デビュー日: 2003/01/08
投稿数: 759
お住まい・勤務地: 太陽系第三惑星
投稿日時: 2006-10-23 17:11
引用:

カタナさんの書き込み (2006-10-23 15:32) より:
BODYのonloadはhtmlでは利用できるが、xhtmlでは利用できないのでしょうか？

ん？onscrollの間違い？onloadは使えるはずだけど。

引用:

その場合、どうやって解決してやればいいのかが分かりません。

IEはdtdの有無でも挙動が変わるので、dtd消してみるとか。
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

ってな感じで。
ぽぴ王子
ぬし
会議室デビュー日: 2006/03/24
投稿数: 475
お住まい・勤務地: お住まい:城・勤務地:城
投稿日時: 2006-10-23 17:40
こんにちは。

以下のサンプルをもとに、こんな感じのものを作りました。
http://www.openspc2.org/JavaScript/reference4/event/onScroll/index.html

コード:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Sample</title>
        <script type="text/javascript"><!--
        window.onload = function() {
            // document.getElementById("sArea").onscroll = function() {
            document.body.onscroll = function() {
                document.getElementById("result").innerHTML = "Scroll Event !!";
            }
        }
        // --></script>
    </head>
    <body>
        <div id="result"></div>
        <div id="sArea"
            style="width:1000px;height:1000px;
            overflow:scroll;
            background-color:orange;
            font-size:24pt;">
        onScroll<br />Event<br />Sample<br />
        </div>
    </body>
</html>

このままであれば正しく「Scroll Event !!」と表示されます。
ただ、先頭の <?xml ～ ?> を取り除くと、うまく動きません。
これはなにかと言うと、IE6 では DOCTYPE 宣言よりも前に文字列があると後
方互換モードに遷移するためです。
ちょっと古いですが参考文献。
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html

このことから導き出される結論は「IE6 は標準モードでは body に対する
onscroll が有効にならない」だと言えるでしょう。たぶん。
じゃあどうするかというと、タイマで一定時間ごとにポーリングしてスクロール量を
検出するとか、あとはいさぎよくあきらめるとか（ひどい）、そういった感じになるの
ではないでしょうか。

ちなみに「わざと後方互換モードにして回避する」という案もあるかもしれません
が、オススメしません。というか、それだと何のために XHTML にするのかわか
らなくなりそうな気がするので。
_________________
ぽぴ王子＠わんくま同盟
ぽぴ王子の人生プログラミング中 / ぽぴンち。
air
会議室デビュー日: 2006/08/07
投稿数: 12
投稿日時: 2006-10-23 21:30
こんな感じでどうでしょうか。
コード:
window.onload = function() {
	var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");
	if(isIE && document.compatMode=="BackCompat"){
		document.body.onscroll = ScrollEvent;
	}else{
		document.documentElement.onscroll = ScrollEvent;
	}
}

function ScrollEvent(){
	window.status += "s"; // IEのみ
}

IEの場合、一回のスクロールでやたらscrollイベントが発生するので、
ScrollEvent の内容によっては window.setTimeout, window.clearTimeout
を使って工夫するすると良いかもしれません。
カタナ
大ベテラン
会議室デビュー日: 2006/05/25
投稿数: 110
投稿日時: 2006-10-24 11:41
皆様色々とありがとうございました。
また返信が遅れて申し訳ありませんでした。
airさんの方法で解決することができました。
本当にありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）