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>

回答の条件
  • 1人10回まで
  • 登録:2006/09/06 12:34:50
  • 終了:2006/09/13 12:35:03

回答(2件)

id:llusall No.1

llusall回答回数505ベストアンサー獲得回数612006/09/06 12:48:11

ポイント35pt

発想を少し変えて、

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

id:susie-t No.2

susie-t回答回数99ベストアンサー獲得回数182006/09/06 16:16:14

ポイント35pt

みたところ、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> 

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません