[找到答案（请向下滚动到Edit2）]：我正在尝试在我的主题中实现可滚动。我遇到了一些问题。我对javascript知之甚少，但由于这里的人鼓励我尝试，因为它有很好的文档记录，我尝试了一下。现在，我需要您的帮助。
我想要几个实例，但在我当前的设置下，它不起作用。如果我滚动浏览一个实例，另一个实例也会滚动。对于知道该怎么做的人来说，这可能很容易解决。
此外（我想这是一个CSS问题），我无法让“prev”和“next”按钮正常工作，我也不知道为什么。
这是我试图实现它的混乱页面：click我使用了提供的最小设置html、javascript和CSShere.文档介绍了多个实例here, 但我不太明白。
编辑：看起来效果不错，这里：http://www.tribalmystic.com/test/prevnext/我使用Firebug分析Javascript。他们尝试了我使用的方法。scrollable2等等，但对我来说根本没有效果！！有人知道为什么吗？
好了，我们开始：HTML+JS：
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
<!-- test 1 -->
$("#scrollable-1").scrollable();
<!-- test 2 -->
$("#scrollable-2").scrollable();
});
</script>
<!-- "previous page" action -->
<a class="prev browse left"><img src="http://zoomingjapan.com/wp-content/themes/alltuts/images/left.png" border="0" ></a>
<!-- root element for scrollable -->
<div id="scrollable-1">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>
<!-- 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>
<!-- 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"><img src="http://zoomingjapan.com/wp-content/themes/alltuts/images/right.png" border="0" ></a>
</div>
<!-- "previous page" action -->
<a class="prev browse left"><img src="http://zoomingjapan.com/wp-content/themes/alltuts/images/left.png" border="0" ></a>
<!-- root element for scrollable -->
<div id="scrollable-2">
<!-- root element for the items -->
<div class="items">
<!-- 15-20 -->
<div>
a ölkad jfaölkds jfölksad jfösalkd jfsa
daödkjf aölksd jfölksad jfölksad jf
adsfjaöksdl jfölkdsa jfölkdsa jfölksad jfölkdsa jfölksadjf ölksadjf
dsfjaöksd jfölksadjf
</div>
<!-- 20-25 -->
<div>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST
</div>
<!-- 25-30 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"><img src="http://zoomingjapan.com/wp-content/themes/alltuts/images/right.png" border="0" ></a>
CSS：
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
#scrollable-1 {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;
/* custom decorations */
border:1px solid #ccc;
background:#fff;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it\'s enough that you set the width and height for the root element and
not for this element.
*/
#scrollable-1 .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:680px;
}
/* single scrollable item */
#scrollable-1 img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
#scrollable-1 .active {
border:2px solid #000;
position:relative;
cursor:default;
}
/* this makes it possible to add next button beside scrollable */
#scrollable-1 {
float:left;
}
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
#scrollable-2 {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;
/* custom decorations */
border:1px solid #ccc;
background:#fff;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it\'s enough that you set the width and height for the root element and
not for this element.
*/
#scrollable-2 .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:680px;
}
/* single scrollable item */
#scrollable-2 img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
#scrollable-2 .active {
border:2px solid #000;
position:relative;
cursor:default;
}
/* this makes it possible to add next button beside scrollable */
#scrollable-2 {
float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
display:block;
width:30px;
height:30px;
float:left;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
哪里出错了？
EDIT2：找到了一个解决方案：我终于找到了该做什么，所以我把它写在这里作为将来参考的答案（可能其他人也遇到了同样的问题）。我希望可以回答你自己的问题？如果没有，请告诉我！
如果您将整个可滚动div包装在自己的div中，包括“prev”和“next”div，那么它可以正常工作，没有任何问题，更多信息here.
我可怜的神经！！；）
我真的很感谢你的帮助，谢谢！
