jQueryの上下矢印でスクロール可能なコンテナ内のコンテナにdivを作成しようとしています。私は私が使用したい見つけることができますjQueryでdivをスクロールする
唯一のことは、私はjQueryのにそれを変換しようと始めたでしょう http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
だった、しかし、それは、i層と層のようなタグを使用するapepars。可能であれば、より標準的なタグを使用したいと思います。
正しい方向のポインターを高く評価します。
比較的位置コンテンツの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);
});
});
ベアボーンの実装を自分で作成したくない場合は、このためのプラグインがあります。これは "scrollTo"（link）と呼ばれています。特定のポイントへのプログラムスクロールを実行したり、連続スクロールには-= 10pxのような値を使用することができます。
私は、これは正確に何をしたいかどうかを知りませんが、あなたはスクロールバーを作成するために、CSS overflowプロパティを使用することができます知っていましたか？
CSS：
div.box{
width: 200px;
height: 200px;
overflow: scroll;
}
はHTML：
<div class="box">
All your text content...
</div>
私はOPがやりたかったことを考えていますが、この機能をjQueryに置き換えています。実際には、私はおそらくautoにCSSのオーバーフローを設定します。コンテンツがdivよりも長くない場合、スクロールバーは不要です。これは実際にはDIVのデフォルトのCSSにする必要があります。オーバーフローをオフにするにはjavascriptを使用する必要があります。 – Armstrongest
あなたはこのコードで私の非常に大きな問題を解決しました。もう少し手伝ってほしい。 divのスクロールバーの色やフォーマットを変更するにはどうすればよいですか？ –
私は、これは年齢古いですけど、今朝似た何かを探し、そしてAtømixの応答にまで読めば（これは何であるとして私たちは達成を目指しています）、私はこれを見つけました：http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div。
誰かが解決策を必要とする場合に備えて、そこに置くだけです。 :)
私はこの同じ答えを探していたと私はので、私は自分自身を作成し、それをここに掲載たかった正確に何をした何も見つけることができませんでした：
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);
}
は再帰：
いくつかのコードを開始するためのJonathan Sampsonのおかげで、最初はうまくいきませんでしたので、私は大幅に変更しました。それを改善するための提案は、ブログのコメントやコメントのいずれかで素晴らしいでしょう。
優れたプラグインは、
これは絶対に美しいです。私はそれを数分でサイトに統合しました。素晴らしい仕事 ！！！！ –
このjscrollpaneは私の仕事です：
<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>
特にダイナミックな高さのために良いでしょう。私もこれが必要です。 – Kezzer
フィードバックいただきありがとうございます。 ScrollTo jQuery Pluginを使用したいのですが、実際には動作させることはできません。それは簡単な例が欠けている - それは私が必要なすべてです！ –