我正在尝试使用jQuery Tools Scrollable，我之前已经使用过很多次，但现在它似乎不起作用，我不知道为什么。
这是我正在使用的网站，如果需要，我可以在这里粘贴代码，但我相信你可以在控制台中查看源代码，所有内容都是纯 HTML、CSS 和 JavaScript / jQuery：http： //rolandgroza.com/projects/tcsg/
这是HTML结构：
<section class="galleries-wrapper">
<div class="paper-stack-wrapper">
<div class="header-wrapper">
<h2>Featured Galleries</h2>
</div>
<div class="content-wrapper scrollable vertical">
<div class="items">
<div class="item">
<ul class="css-galleries-list">
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/awwwards.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">awwwards</a></span>
<span class="css-gallerie-rank">6</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/cssdesignawards.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">cssdesignawards</a></span>
<span class="css-gallerie-rank">6</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/csswinner.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">csswinner</a></span>
<span class="css-gallerie-rank">4</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/divinecss.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">divinecss</a></span>
<span class="css-gallerie-rank">5</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/pagecrush.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">pagecrush</a></span>
<span class="css-gallerie-rank">3</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
</ul>
</div>
<div class="item">
<ul class="css-galleries-list">
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/awwwards.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">awwwards</a></span>
<span class="css-gallerie-rank">6</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/cssdesignawards.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">cssdesignawards</a></span>
<span class="css-gallerie-rank">6</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/csswinner.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">csswinner</a></span>
<span class="css-gallerie-rank">4</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/divinecss.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">divinecss</a></span>
<span class="css-gallerie-rank">5</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
<li>
<span class="css-gallerie-logo"><a href="#"><img src="assets/gfx/pagecrush.jpg"></a></span>
<span class="css-gallerie-name"><a href="#">pagecrush</a></span>
<span class="css-gallerie-rank">3</span>
<span class="css-gallerie-sbmt"><a href="#">Submit</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-wrapper">
<h2>Other Galleries</h2>
</div>
</div>
<div class="paper-stack-shadow"></div>
<div class="galleries-navigation">
<ul class="nvg">
<li class="previous-items"><a class="prev-item"><img src="assets/gfx/prev-item.png" alt="Previous" /></a></li>
<li class="next-items"><a class="next-item"><img src="assets/gfx/next-item.png" alt="Next" /></a></li>
</ul>
</div>
</section>
这是 LESS 样式（不是那么相关，但插件需要一些 CSS 规则）：
.galleries-wrapper {
position: relative;
float: right;
margin-top: 50px;
.dimensions(450px, 350px);
.opacity(0);
.paper-stack-wrapper {
position: relative;
margin: 0px auto;
.dimensions(450px, 350px);
.border(1px, 1px, 1px, 1px, #bbc2c8);
.radius(5px, 5px, 5px, 5px);
.background(@noise-dark, #f9f9f9, #f9f9f9);
&:before {
position: absolute;
top: 1px;
left: 0px;
content: "";
z-index: -1;
.dimensions(448px, 350px);
.border(1px, 1px, 1px, 1px, #bbc2c8);
.radius(5px, 5px, 5px, 5px);
.background(@noise-dark, #f9f9f9, #f9f9f9);
}
&:after {
position: absolute;
top: 3px;
left: 1px;
content: "";
z-index: -2;
.dimensions(446px, 350px);
.border(1px, 1px, 1px, 1px, #bbc2c8);
.radius(5px, 5px, 5px, 5px);
.background(@noise-dark, #f9f9f9, #f9f9f9);
}
.header-wrapper {
position: relative;
margin: 0px auto;
.dimensions(450px, 40px);
.radius(5px, 5px, 0px, 0px);
.shadow(@shadow-inset, 0px, -1px, 2px, rgba(000, 000, 000, 0.2));
h2 {
.font(ChunkFiveRoman, 21px, normal, normal, normal);
.text-format(center, none, none, inherit, uppercase, normal, 40px, normal, #afafaf);
}
}
.scrollable {
position: relative;
margin: 0px auto;
.dimensions(450px, 269px);
overflow: hidden;
.items {
position: absolute;
height: 20000em;
.item {
position: relative;
margin: 0px auto;
.dimensions(450px, 269px);
.css-galleries-list {
position: relative;
margin: 0px auto;
.dimensions(450px, 269px);
list-style: none;
li {
position: relative;
margin: 0px auto;
.dimensions(450px, 53px);
.border(1px, 0px, 0px, 0px, #bbc2c8);
.background(@noise-dark, #ffffff, #f6f6f6);
&:first-child {
.border(0px, 0px, 0px, 0px, #bbc2c8);
}
&:hover {
.background(@noise-dark, #f6f6f6, #f1f1f1);
}
.css-gallerie-logo {
position: relative;
float: left;
.dimensions(180px, 53px);
a {
position: relative;
margin: 0px auto;
display: block;
.dimensions(150px, 53px);
img {
position: relative;
margin: 0px auto;
margin-top: 11.5px;
.border(1px, 1px, 1px, 1px, #000000);
}
}
}
.css-gallerie-name {
position: relative;
float: left;
.dimensions(150px, 53px);
a {
display: block;
.font(ChunkFiveRoman, 14px, normal, normal, normal);
.text-format(left, none, none, inherit, uppercase, normal, 53px, normal, #afafaf);
.transition (all, 0.25s, ease-in-out);
&:hover {
.font(ChunkFiveRoman, 14px, normal, normal, normal);
.text-format(left, none, none, inherit, uppercase, normal, 53px, normal, #1fbacb);
.transition (all, 0.25s, ease-in-out);
}
}
}
.css-gallerie-rank {
position: relative;
float: left;
display: block;
.dimensions(50px, 53px);
.font(ChunkFiveRoman, 16px, normal, normal, normal);
.text-format(center, none, none, inherit, uppercase, normal, 53px, normal, #82a664);
}
.css-gallerie-sbmt {
position: relative;
float: left;
.dimensions(50px, 53px);
a {
#bundle > .button(55px, 22.5px, 25px,Arial, 11px, normal);
position: relative;
margin: 0px auto;
margin-top: 15.25px;
}
}
}
}
}
}
}
.footer-wrapper {
position: relative;
margin: 0px auto;
.dimensions(450px, 41px);
.radius(0px, 0px, 5px, 5px);
.shadow(@shadow-inset, 0px, 1px, 2px, rgba(000, 000, 000, 0.2));
h2 {
.font(ChunkFiveRoman, 21px, normal, normal, normal);
.text-format(center, none, none, inherit, uppercase, normal, 40px, normal, #afafaf);
}
}
}
.paper-stack-shadow {
position: absolute;
top: 290px;
.dimensions(450px, 50px);
z-index: -5;
&:before {
position: absolute;
top: 80%;
left: 10px;
bottom: 5px;
width: 50%;
max-width: 300px;
content: "";
z-index: -1;
.shadow(@shadow-normal, 0px, 15px, 10px, #777777);
.transform-rotate(-3deg);
}
&:after {
position: absolute;
top: 80%;
right: 10px;
bottom: 5px;
width: 50%;
max-width: 300px;
content: "";
z-index: -1;
.shadow(@shadow-normal, 0px, 15px, 10px, #777777);
.transform-rotate(3deg);
}
}
.galleries-navigation {
position: absolute;
top: 50%;
right: -42px;
margin-top: -40px;
.dimensions(40px,80px);
.border(1px, 0px, 1px, 1px, #bbc2c8);
.background(@noise-dark, #f9f9f9, #f9f9f9);
.radius(0px, 5px, 5px, 0px);
.shadow(@shadow-normal,0px, 0px, 4px, rgba(0,0,0,0.1));
z-index: -5;
.nvg {
position: relative;
margin: 0px auto;
.dimensions(40px, 80px);
list-style: none;
.previous-items {
position: relative;
margin: 0px auto;
.dimensions(40px, 40px);
.border(0px, 0px, 0px, 0px, rgba(247,247,247,1));
display: block;
a {
position: relative;
margin: 0px auto;
.dimensions(40px, 40px);
display: block;
cursor: pointer;
.font (Arial, 13px, normal, normal, normal);
.text-format(center, none, none, inherit, none, normal, normal, normal, #6e6e6e);
.transition (all, 0.3s,ease-in-out);
img {
position: relative;
margin: 0px auto;
.dimensions(40px, 40px);
.opacity(0.8);
.transition (all, 0.3s,ease-in-out);
border: none;
}
&:hover > img {
.opacity(1);
}
}
}
.next-items {
position: relative;
margin: 0px auto;
.dimensions(40px, 40px);
.border(1px, 0px, 0px, 0px, #bbc2c8);
display: block;
a {
position: relative;
margin: 0px auto;
.dimensions(40px, 40px);
display: block;
cursor: pointer;
.font (Arial, 13px, normal, normal, normal);
.text-format(center, none, none, inherit, none, normal, normal, normal, #6e6e6e);
.transition (all, 0.3s,ease-in-out);
img {
position: relative;
margin: 0px auto;
.dimensions(40px, 40px);
.opacity(0.6);
.transition (all, 0.3s,ease-in-out);
border: none;
}
&:hover > img {
.opacity(1);
}
}
}
}
}
}
这就是我调用插件的方式：
var next_items = $(container.home).find('.next-item');
var prev_items = $(container.home).find('.prev-item');
$.easing.custom = function (x, t, b, c, d) {
var s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
$(".scrollable").scrollable({
vertical: true,
easing: 'custom',
speed: 700,
circular: false,
next: next_items,
prev: prev_items,
mousewheel: true
});
