人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの質問。

http://q.hatena.ne.jp/1157509725
で教えて頂いてIE、Opera、FireFoxは動いたのですがネットスケープ7.1、macのIE5では動作しませんでした。

下記のソースをネットスケープ、macのIEに対応させることは可能でしょうか?


<html>
<head>
<script language="JavaScript">
var timeout;
var y = 0;
var step = 2;
function down(){

if (y < 0){y=0;}
var e=document.getElementById("hoge");
if(e.scrollTop<e.scrollHeight-e.offsetHeight){
e.scrollTop = y;
window.status = y;
y = y + step;
timeout=setTimeout("down()",2);
}
}

function up(){
if (y >=0 ){
document.getElementById("hoge").scrollTop = y;
window.status = y; //テスト用
y = y - step;
}
timeout=setTimeout("up()",20);
}

function stop1(){
clearTimeout(timeout);
}


</script>
</head>
<body>
<img src="up.gif" onMouseOver="up()" onMouseOut="stop1();">
<img src="down.gif" onMouseOver="down()" onMouseOut="stop1();">

<div style="width:150px;height:200px;overflow:hidden;border:1px solid;" id="hoge">
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>
o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
</div>
</body>
</html>

●質問者: pipi_n
●カテゴリ:ウェブ制作
✍キーワード:firefox hoge IE JavaScript MAC
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● llusall
●35ポイント

発想を少し変えて、

scrollTop値を保持っておき、前回のものと比較して、変化ない場合は停止(加算しない)というのはどうでしょう?


2 ● susie-t
●35ポイント

みたところ、Netscapeでは要素のscrollTopへの指定が無効な気がします。いっそscrollTopを捨てて、styleプロパティだけで操作するというのも手かと。

以下のコードでいちおうwinXP&Netscape7.1とIE6にて動きました。申し訳ないですが、Macは環境がないので確認できないです。

外枠と内容のdivを分けてあります。両方ともposition:relative;を指定してください。(外枠の指定を忘れると、hiddenにならない場合があります)

参考になれば幸いです。

※余談ですが、これだと微妙にスクロールしきらないです。たとえば、down時に100が上限で30ずつ動いて90のとき、100にならずに止まります。(前の回答はその逆で120になります)工夫してみてください。

<html>
<head>
<script language="JavaScript">
var timeout;
var y = 0;
var step = 2;
function down(){

if (y < 0){y=0;}
var e=document.getElementById("hoge");
if(y<e.scrollHeight-e.parentNode.offsetHeight){
e.style.top = -y + "px";
window.status = y;
y = y + step;
timeout=setTimeout("down()",2);
}
}

function up(){
if (y >=0 ){
document.getElementById("hoge").style.top = -y + "px";
window.status = y; //テスト用
y = y - step;
}
timeout=setTimeout("up()",20);
}

function stop1(){
clearTimeout(timeout);
}


</script> 
</head>
<body>
<img src="up.gif" onMouseOver="up()" onMouseOut="stop1();">
<img src="down.gif" onMouseOver="down()" onMouseOut="stop1();">
<div style="width:150px;height:200px;overflow:hidden;border:1px solid;position:relative;">
<div id="hoge" style="position:relative;">
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>
o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
</div>
</div>
</body>
</html> 
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ