اسکرول صفحه [بایگانی]

tux-world

شنبه 14 اسفند 1389, 18:33 عصر

سلام. می خوام یه دایو تعریف کنم که overflow باشه ولی وقتی اطلاعات زیاد باشه دیگه اسکرول براش ظاهر نشه و بتونم با تعریف کلید بالا/پایین صفحه رو به صورت اسکرول استفاده کنم. راهی به نظرتون میرسه ؟

hossin.esm

یک شنبه 15 اسفند 1389, 09:05 صبح

<html>
<head>
<title>Title of Page</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function() {

$('#t').keydown(function (event){

if (event.keyCode == '38')
{
//up
var t=$(this).scrollTop()-5;

$(this).scrollTop(t);

}
else if(event.keyCode == '40')
{
//down
var t=$(this).scrollTop()+5;

$(this).scrollTop(t);

}

});

$('#up').click(function (){

//up
var t=$('#t').scrollTop()-5;
$('#t').scrollTop(t);
});
$('#down').click(function (){

//down
var t=$('#t').scrollTop()+5;
$('#t').scrollTop(t);
});
});

</script>
</head>
<body>
<div id="t" style="overflow:hidden;width:600px;height:480px;border:#9 99999 1px solid;margin-left:10px;" >
<div>begin</div>
<div style="height:600px;width:20px;background:#0F0;margin-left:50px"></div>
<div>end</div>
</div>
<button id="up">up</button>
<button id="down">down</button>
</body>
</html>

tux-world

یک شنبه 15 اسفند 1389, 10:34 صبح

دست گلت درد نکنه.
این قسمت keydown برای صفحه کلید هستش نه؟ برام کار نکرد ؟

hossin.esm

یک شنبه 15 اسفند 1389, 13:08 عصر

خواهش میکنم
بله فقط در IE عمل میکنه
کد را اصلاح کردم البته قبلش باید روی div حتما focus شده باشه.

<html>
<head>
<title>Title of Page</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#t').click(function (ev){
$(document).keydown(function (ev){

if (ev.keyCode == '38')
{
//up

var t=$('#t').scrollTop()-5;

$('#t').scrollTop(t);

}
else if(ev.keyCode == '40')
{
//down
var t=$('#t').scrollTop()+5;

$('#t').scrollTop(t);

}

});
});

$('#up').click(function (){

//up
var t=$('#t').scrollTop()-5;
$('#t').scrollTop(t);
});
$('#down').click(function (){

//down
var t=$('#t').scrollTop()+5;
$('#t').scrollTop(t);
});

});

</script>
</head>
<body>
<div id="t" style="overflow:hidden;width:600px;height:480px;border:#9 99999 1px solid;margin-left:10px;display:block;" >
<div>begin</div>
<div style="height:600px;width:20px;background:#0F0;margin-left:50px"></div>
<div>end</div>
</div>

<button id="up">up</button>
<button id="down">down</button>
</body>
</html>