- PR -

画面スクロールのイベントについて

1|2 次のページへ»
投稿者投稿内容
あと一歩
常連さん
会議室デビュー日: 2007/09/23
投稿数: 49
投稿日時: 2009-03-01 21:18
いつも、利用させて頂いてます

.aspxの画面にエレベータメニューを表示することを実装しています

画面表示は出来るのですが、画面スクロールのイベントを拾ってくれません
（要は、画面スクロールについてきてくれません）

同じ画面を.htmlで作成すると、画面スクロールのイベントを拾ってくれます

java-scriptの処理なので関係ないと考えているのですが
違うのでしょうか

よろしくお願いします
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-03-01 23:51
期待する回答が欲しいのであればもう少し具体的な事例やコードが
必要だと思いますよ。

リストのトリガーイベントに関してもそうですが。
トリガー使わなければいいだけの話ですから。

ＢＯＤＹタグの onscroll イベントが肝なんですが、確認しましたか？
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2009-03-02 06:06
ソースコードを添付していただくと
いろいろアドバイスできるのですが・・・
_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
あと一歩
常連さん
会議室デビュー日: 2007/09/23
投稿数: 49
投稿日時: 2009-03-02 17:24
ぴあちゃんさん、Ａｃｃｅｓｓさん
回答、ありがとうございます

原因は、ある程度特定できました

.htmlの場合、
〜.style.top = 変数　の形で値がセットできたのですが

.aspxの場合、
〜.style.top = 変数　の形で値をセットすることが出来ません
〜.style.top = '10px'　こんようにセットしないと設定されないため
その後の処理が正しく動かないことが原因でした

Onscrollイベントについては、まだ調べておりませんが
ＩＥのみ対応のイベントではないでしょうか

対象のブラウザがＩＥとFIREFOXのため
対処方法を考えています

以上、よろしくお願いします


King
ぬし
会議室デビュー日: 2008/06/20
投稿数: 284
投稿日時: 2009-03-02 18:14
いやいや・・・。

引用:
ぴあちゃんさん、Ａｃｃｅｓｓさん
回答、ありがとうございます

の前にお二人ともコードをある程度見せて、って仰ってますよね？

「変数」って何なのか、どこにその処理を書いているのか
などが見ている人にはわかりません。
あなただけが状況を把握して、あなただけが納得して進んでいます。
あと一歩
常連さん
会議室デビュー日: 2007/09/23
投稿数: 49
投稿日時: 2009-03-03 01:17
ぴあちゃんさん、Accessさん、Kingさん
お世話になります

alertをいっぱい入れちゃってますけど
これがコードです

javascriptになっていて、．aspxでincludeしてます

//////////////////////////////////
//DIVのあるべき位置を取得する
//ordinate(座標) "X" or "Y"
//戻り値 X or Y 座標
function DivLocat(ordinate){
var LRstate=0,UDstate=0;
if (isIEtrue || isOP7){ // mouseX ,Y 絶対座標
mouseXm = document.body.scrollLeft
mouseYm = document.body.scrollTop
alert("isIEtrue || isOP7 mouseXm" + mouseXm)
alert("isIEtrue || isOP7 mouseYm" + mouseYm)
} else if (isNS6 || isNS7 || isMZ1) {
mouseXm = self.pageXOffset;
mouseYm = self.pageYOffset;
alert("isNS6 || isNS7 || isMZ1 mouseXm" + mouseXm)
alert("isNS6 || isNS7 || isMZ1 mouseYm" + mouseYm)
}
if (ordinate.toUpperCase() == "X"){ // X座標
if(LRmode==1){
alert("// X座標 parseInt")
alert("WinSize(X)" + WinSize("X"))
alert("DivSize(W)" + DivSize("W"))
alert("DivLocationX" + DivLocationX)
alert("mouseXm" + mouseXm)
alert("MozillaState" + MozillaState)
return parseInt(WinSize("X") - DivSize("W") - DivLocationX + mouseXm - MozillaState)
}
alert("// X座標 parseIntじゃない")
alert("DivLocationX" + DivLocationX)
alert("mouseXm" + mouseXm)

return DivLocationX + mouseXm
} else if (ordinate.toUpperCase() == "Y"){ // Y座標
if (UDmode==1){
alert("// Y座標 parseInt")
return parseInt(WinSize("Y") - DivSize("H") - DivLocationY + mouseYm - MozillaState)
}
alert("// Y座標 parseIntじゃない")
alert("DivLocationX" + DivLocationX)
alert("mouseXm" + mouseXm)
return DivLocationX + mouseXm
}
alert("DivLocat end")
}


var minMenu,maxMenu
var style_top,style_top2,style_left
//////////////////////////////////
//初期動作ステータス作成
function startwindow(){
if ( !document.getElementById("MoveDiv") || !isJS ) return;

//グローバルで使用するDIV情報取得「div_data」の作成
div_data = document.getElementById("MoveDiv");
div_data.style.position="absolute"
divcheck=true; //DIVの準備が完了

if (document.getElementById("MoveDiv_min")){
div_mini = document.getElementById("MoveDiv_min")
maxMenu = div_data.innerHTML
minMenu = div_mini.innerHTML
div_mini.style.display = "none";
div_mini.style.position= "absolute";
div_data.innerHTML = minMenu
}

//DIVサイズの取得
DivSize("W");
DivSize("H");


//ユーザーステータス読込
for (i = 0 ; i <= 500; i ++){
div_check = document.getElementsByTagName('div')[i];
if (div_check){
if(div_check.id.substr(0, =="setM_ID@"){
ComponentsDivData(div_check.id) //ステータス読み込み
}
} else {
break; //FOR終了
}
}

//DIVを指定座標上に描画する

div_data.style.top = DivLocat("Y")

　　　　※※ここで 、div_data.style.topに値がセットされません
　　　　(firefoxの場合のみ)


div_data.style.left = DivLocat("X");

timerID = setInterval("divPreset()",timerIDtiming); //基幹時間軸の生成



//マウスの動作を追従
if (isJS) document.onmousemove = mousemove;
}

.htmlにincludeしている場合はうまくいくのですが．．

以上、よろしくお願いします
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-03-04 01:43
なんだかよくわからないのですが、コピペで実行してみてください。
一応、これだけで、スクロールに追従する四角いものが出来ます。
こんなのが希望しているものなんじゃなくて？？

コード:

<script>

var ie = typeof document.all;



var $ID = function(id, p) { p = p || document;return p.getElementById(id); } 

window.onload = function() {

   var scrollEvent;



   if (document.all) {

      scrollEvent = document.body;

   }

   else {

      scrollEvent = window;

   }



   scrollEvent.onscroll = function() {

      with($ID("Div1")) {

          if (ie) {

              style.top = document.body.scrollTop + "px";

              style.left = document.body.scrollLeft + "px";

              window.status = document.body.scrollLeft + "::" + document.body.scrollTop;

          }

          else {

              style.top = self.pageYOffset + "px";

              style.left = self.pageXOffset + "px";

              window.status = self.pageXOffset + "::" + self.pageYOffset;

          }

      }

   }

}

</script>

<style>

#Div1 { background-color:pink;width:100px;height:100px;

overflow:hidden;position:absolute;z-index:2;left:0;top:0;

}

</style>

<body>

<div id="Div1">あああ</div>

<div style="position:absolute;left:500px;">500</div>

<div style="position:absolute;left:750px;">750</div>

<div style="position:absolute;left:1000px;">1000</div>

<div style="position:absolute;left:1250px;">1250</div>



<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p>ココ1</p>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p>ココ2</p>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p>ココ3</p>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p>ココ4</p>

</body>


「なんだかよくわからない」と書いたのは、onmousemove をハンドルしている
のに、やってることはスクロール左上座標を四角いモノに設定してるってこと。
マウスの動きに追従させたいのではなくて、スクロールしても常に同じ位置に
留まる四角いモノが必要なんでしょ？
position:static だったか(fixed かも？）。。。ＩＥ７とFirefoxはこれを指
定すれば、イベントハンドリングする必要すら無いけど。

訂正：Firefox と IE らしいので両方で動くように改良。


[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2009-03-04 01:51 ]

[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2009-03-04 02:16 ]
あと一歩
常連さん
会議室デビュー日: 2007/09/23
投稿数: 49
投稿日時: 2009-03-05 20:21
ぴあちゃんさん

ご教授、ありがとうございます

ただ、ASP.NET3.5の環境では、うまく動きません

スタイルシート（position:static ）と合わせて引き続き調査します

やりたいことは、左上に追従させることと、マウスが当たったら
別DIVで囲っている形に変えるという処理です

いろいろ、ありがとうございます
1|2 次のページへ»

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