- PR -

web画面内部のテーブルでのスクロール位置の固定

参照元記事 | 同じ記事を参照しているスレッド一覧
1
投稿者投稿内容
背古井
常連さん
会議室デビュー日: 2004/04/02
投稿数: 39
投稿日時: 2004-10-25 14:55
お世話になっております　背古井です
開発環境：Microsoft Visual Basic 2003
開発OS　：Windows 2000 Pro
使用ブラウザ：IE 5.10以上固定

以上の環境で開発しております。
ASP.NETを使用したweb画面におきまして、データグリッド内で
ボタンをクリックするとポップアップウインドウが表示されるようにプログラムを作成しました。
ポップアップ処理のソースは以下の通りです。

---- ポップアップソース

Public Function Fnc_Calendar_Open() As String
'----- 変数定義 -----
Dim Dim_Javascript_Window_Open As String 'Javaスクリプト

'----- Javaスクリプト記述 -----
Dim_Javascript_Window_Open = "<Script Language=Javascript>"
Dim_Javascript_Window_Open &= "window.open('../common/Calendar.aspx?PAGE_FORM_ID=" & Dim_FormID & "&PAGE_TXTBOX_ID=" & Dim_TextBoxID & "','Calendar','width=210,height=220');"
Dim_Javascript_Window_Open &= "</Script>"

'----- Javaスクリプト発行 -----
Dim_PageID.Response.Write(Dim_Javascript_Window_Open)
End Function

----　ソース終了

以上の処理をボタンクリック時に行っているため。当然ポップアップ表示時には元のWINDOWも
再表示され、クリックされたボタンの位置から初期表示位置に戻ってしまいます。
そこで、参照URLの「ポストバックが発生したときに、表示していた位置を再表示させる」を利用してjavascriptで解決しました。
具体的にはスクロール時にスクロールの幅を非表示のボックスに代入して、ポストバック時に
セットされたスクロールの幅だけ移動するというものです。

----htmlソース
(上部略)
</HEAD>
<body onload="LoadEvent()" onscroll="ScrollEvent()">
<form id="Frm_ItemEdit" name="Frm_ItemEdit" method="post" runat="server">
<!-- #BeginLibraryItem "/Library/User_Header.lbi" -->
<a name="page_top"></a>
<input id="scrllLeft" type=hidden runat="server">
<input id="scrllTop" type=hidden runat="server">
(中略)
<script language="javascript"><!--
function LoadEvent()
{
window.scrollTo(document.all("ScrllLeft").value, document.all("scrllTop").value);
}

function ScrollEvent()
{
document.all("ScrllLeft").value = window.document.body.scrollLeft;
document.all("scrllTop").value = window.document.body.scrollTop;
}
--></script>
</form>
(後略)
---- htmlソース終了

これと同じことを同一フォーム内に存在するスクロールバーを持つテーブルについても
行えるようにしたいのです。

とりあえず値を取得しようと思い対象にしたいテーブルに

<TABLE id="Table3" cellSpacing="5" align="center" border="0" onscroll="ScrollEventTB()">

として

function ScrollEventTB()
{
document.all("Grd_ScrllLeft").value = window.document.table.scrollLeft;
document.all("Grd_scrllTop").value = window.document.table.scrollTop;
}

とやってみたんですが、やはりそう簡単なものではないようです。
上記の件につきましてもし解決方法をご存知の方がおられましたら
ご教授願います。
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2004-10-25 21:08
引用:

背古井さんの書き込み（2004-10-25 14:55）より：

これと同じことを同一フォーム内に存在するスクロールバーを持つテーブルについても行えるようにしたいのです。

　参照して頂き、ありがとうございます。

　お手元のMSDN（VS.NETのヘルプ）のアドレスバーに、次のURIをコピーペーストしてください。
ms-help://MS.MSDNQTR.2003FEB.1041/jpisdk/dhtml/references/events/events.htm
ただし、2003FEBの部分は、ヘルプの適当な項目を表示して、例えば「ms-help://MS.MSDNQTR.2004APL.1041/」になっていたら、"2004APL"に変更してください。
すると、DynamicHTMLの「イベント」というトピックが表示されます。
（オンラインはこちら）
ここで、onscrollをクリックして「適用」を見ると、table要素はありません。よって、table要素で「onscrollイベント」を捕まえることはできません。div要素にはonscrollがあるので、こちらで捕まえます。

　あと、オブジェクトはgetElementByIdで捕まえるようにしたほうが、ブラウザ依存度は低くなります。

_________________
背古井
常連さん
会議室デビュー日: 2004/04/02
投稿数: 39
投稿日時: 2004-10-26 13:05
Jittaさん回答ありがとうございました
とりあえず他の方法で動くようになりましたが
この方法も試して見ます

ちなみに解決した方法は
テーブル内に作成するグリッドシートにNAMEタグを設定して
リロード時(正確に言うとボタンクリック時)にジャンプさせる処理です。

---- 以下ソースタグ作成
(前略)

'----- データグリッドにデータセットを貼り付ける -----
TBLDATA = SetDs.Tables("TBL_ITEM")

Grd_ItemDatas.DataSource = TBLDATA

'----- データバインド -----
Grd_ItemDatas.DataBind()

'番号貼り付け
Numbers = ItemEdit.Fnc_ValueCut(General.Fnc_NoNull(TBLDATA.Rows(I).Item(3)), "-0", "")
CType(Grd_ItemDatas.Items(I).FindControl("Lbl_Grd_TagPoint"), Label).Text = "<a name='" & Numbers & "'>" & Numbers & "</A>"

----　以下ソースフォーム_表示及びJANP

Public Function Fnc_Calendar_Open() As String
'----- 変数定義 -----
Dim Dim_Javascript_Window_Open As String 'Javaスクリプト

'----- Javaスクリプト記述 -----
Dim_Javascript_Window_Open = "<Script Language=Javascript>"
Dim_Javascript_Window_Open &= "window.open('../common/Calendar.aspx?PAGE_FORM_ID=" & Dim_FormID & "&PAGE_TXTBOX_ID=" & Dim_TextBoxID & "','Calendar','width=210,height=220');"
If Dim_TestNumbers <> "" Then
Dim_Javascript_Window_Open &= "location.href='#" & Dim_TestNumbers & "';"
Else
End If
Dim_Javascript_Window_Open &= "</Script>"

'----- Javaスクリプト発行 -----
Dim_PageID.RegisterStartupScript("Startup", Dim_Javascript_Window_Open)
End Function

*:このときDim_TestNumbersがネームタグです

----　以上ソース表示

という風にしました。ただこれを使うと指定したタグが一番上にきてしまいますので、正確にボタンを押したときの表示とは異なりますので、Jittaさんにお教えいただいた方法も試して、良いほうを使用しようと思います。
ありがとうございました。

1

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