Я пытаюсь создать div в контейнере внутри контейнера, который прокручивается стрелками вверх и вниз в jQuery.
Единственное, что я могу найти, которое я хочу использовать, - это http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
Я бы начал пытаться преобразовать это в jQuery, однако он apepars использует теги, такие как ilayer и layer. Я хотел бы использовать более стандартные теги, если это возможно.
Любые указатели в правильном направлении будут высоко оценены.
Я не знаю, действительно ли это именно то, что вы хотите, но знаете ли вы, что вы можете использовать свойство CSS overflow для создания полос прокрутки?
CSS
div.box{
width: 200px;
height: 200px;
overflow: scroll;
}
HTML:
<div class="box">
All your text content...
</div>
Отличный плагин jscrollpane
jCarousel - это JQuery Plugin, он имеет уже реализованную функциональность, которая может потребоваться для архивирования. это приятно и легко. здесь есть ссылка
и полная документация может быть найдена здесь
Относительно - разместите свой контент div внутри родительского div с переполнением: скрытым. Сделайте стрелки вверх/вниз, перемещая верхнее значение содержимого div. Следующий jQuery не проверен. Дайте мне знать, если вам требуется дополнительная помощь в этом как концепция.
div.container {
overflow:hidden;
width:200px;
height:200px;
}
div.content {
position:relative;
top:0;
}
<div class="container">
<p>
<a href="enablejs.html" class="up">Up</a> /
<a href="enablejs.html" class="dn">Down</a>
</p>
<div class="content">
<p>Hello World</p>
</div>
</div>
$(function(){
$(".container a.up").bind("click", function(){
var topVal = $(this).parents(".container").find(".content").css("top");
$(this).parents(".container").find(".content").css("top", topVal-10);
});
$(".container a.dn").bind("click", function(){
var topVal = $(this).parents(".container").find(".content").css("top");
$(this).parents(".container").find(".content").css("top", topVal+10);
});
});
Я искал этот же ответ, и я не мог найти ничего, что делало именно то, что я хотел, поэтому я создал свой собственный и разместил его здесь:
http://seekieran.com/2011/03/jquery-scrolling-box/
Рабочая демонстрация: http://jsbin.com/azoji3
Вот важный код:
function ScrollDown(){
//var topVal = $('.up').parents(".container").find(".content").css("top").replace(/[^-\d\.]/g, '');
var topVal = $(".content").css("top").replace(/[^-\d\.]/g, '');
topVal = parseInt(topVal);
console.log($(".content").height()+ " " + topVal);
if(Math.abs(topVal) < ($(".content").height() - $(".container").height() + 60)){ //This is to limit the bottom of the scrolling - add extra to compensate for issues
$('.up').parents(".container").find(".content").stop().animate({"top":topVal - 20 + 'px'},'slow');
if (mouseisdown)
setTimeout(ScrollDown, 400);
}
Рекурсия, чтобы это произошло:
$('.dn').mousedown(function(event) {
mouseisdown = true;
ScrollDown();
}).mouseup(function(event) {
mouseisdown = false;
});
Благодаря Джонатану Сэмпсону для запуска какого-то кода, но он не работал изначально, поэтому я сильно изменил его. Любые предложения по его улучшению были бы замечательными в комментариях или комментариях в блоге.
Я знаю, что это возраст, но, найдя что-то подобное сегодня утром, и прочитав ответ Atømix (поскольку это то, к чему мы стремимся), я нашел это: http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div.
Просто поместите это там, если кому-то еще понадобится решение.:)
Там есть плагин для этого, если вы не хотите сами писать реализацию bare-bones. Он называется "scrollTo" (ссылка). Он позволяет выполнять запрограммированную прокрутку до определенных точек или использовать значения, такие как -= 10px для непрерывной прокрутки.
Это сработало для меня:
<html>
<head>
<title>scroll</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<style>
div.container {
overflow:hidden;
width:200px;
height:200px;
}
div.content {
position:relative;
width:200px;
height:200px;
overflow:hidden;
top:0;
}
</style>
<div class="container">
<p>
<a href="javascript:up();"><img src="/images/img_flecha_left.png" class="up" /></a>
<a href="javascript:down();"><img src="/images/img_flecha_left.png" class="down" /></a>
</p>
<div class="content">
<p>Hello World</p><p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
</div>
</div>
<script>
function up() {
var topVal = $(".content").css("top"); //alert(topVal);
var val=parseInt(topVal.replace("px",""));
val=val-20;
$(".content").css("top", val+"px");
}
function down() {
var topVal = $(".content").css("top"); //alert(topVal);
var val=parseInt(topVal.replace("px",""));
val=val+20;
$(".content").css("top", val+"px");
}
</script>
</body>
</html>