Здравствуйте программеры.
Вопрос следующий, мне нужно сделать скрол элементов списка <ul> (то есть <li>).
Я здесь всю страницу не буду приводить, а только те части которые отвечают за это.
Имеется css стиль:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
.topmenu ul.items{
background-color: #FFFFFF;
left: 0;
margin: 0;
position: absolute;
width: 960px;
z-index: 400;
height: 325px;
overflow: hidden;
border-radius: 0 0 10px 10px;
display: none;
top:41px;
border-bottom: 1px solid #4F4F4F;
border-right: 1px solid #4F4F4F;
border-left: 1px solid #4F4F4F;
box-shadow: 1px 1px 3px #4F4F4F;
-webkit-box-shadow:1px 1px 3px #4F4F4F;
-moz-box-shadow:1px 1px 3px #4F4F4F;
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=1, offY=1, color=#4F4F4F);
}
.topmenu ul.items > li{
margin: 0 1%0 1%;
padding: 0;
width: 14.5%;
float: left;
}
.topmenu ul.items > li > a{
display: block;
color: #D65712;
font: bold 12px/26px Tahoma, sans-serif;
text-transform: uppercase;
text-decoration: none;
margin: 2px 14px 2px 19px;
white-space: nowrap;
border-bottom: 1px solid #CBCBCB;
}
.topmenu ul.items > li > div{
position: relative;
height: 291px;
}
.topmenu ul.items > li > div > div{height: 16px;width: 100%;position: absolute;left:0;cursor: pointer;}
.topmenu ul.items > li > div > .scroll-down{background: url(/images/scroll-down.png) no-repeat center center #fff;bottom:0;}
.topmenu ul.items > li > div > .scroll-up{background: url(/images/scroll-up.png) no-repeat center center #fff;top: 0;display: none;}
.topmenu ul.item{
padding-left: 13%;
margin: 0;
height: 275px;
overflow: hidden;
}
.topmenu ul.item > li{
background: none;
padding: 0;
display: block;
line-height: 16px;
}
.topmenu ul.item > li a{
color: #000;
font: normal 11px Tahoma, sans-serif;
text-transform: none;
text-decoration: none;
}
.topmenu ul.item > li a:hover{color: #B9271E;text-decoration: underline;}
Далее имеется HTML - разметка
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
<ul class="topmenu">
<li>
<a href="">Каталог</a>
<!-- формирование меню каталога -->
<div>
<ul class="items" style="display: none;">
<li>
<a href="">Samsung</a>
<div class="scroll">
<div class="scroll-up"></div>
<div class="scroll-down"></div>
<ul class="item">
<li><a href="">Galaxy S5 SM G900</a></li>
<li><a href="">Galaxy Note 3 N9005</a></li>
<li><a href="">Galaxy Tab 3 10.1 P5210</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
<li><a href="">Galaxy Tab 3 7.0 P3200</a></li>
</ul>
</div>
</li>
<li>
<a href="">Apple</a>
<div>
<ul class="item">
<li><a href="">Ipad Air</a></li>
<li><a href="">Iphone 5/5S</a></li>
<li><a href="">Ipad Mini</a></li>
<li><a href="">Ipad Mini</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- end формирование меню каталога -->
</li>
<li>
<a href="">Акции</a>
</li>
<li>
<a href="">Доставка и оплата</a>
</li>
<li>
<a href="">Гарантии</a>
</li>
<li>
<a href="">Статьи и обзоры</a>
</li>
<li>
<a href="">Контакты</a>
</li>
</ul>
имеется скрипт
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
$(document).ready(function(){
var in_items = false;
$('ul.items').parent().siblings('a').mouseenter(function(){
var items = $(this).parent().find('ul.items').fadeIn(300);
in_items = false;
});
$('ul.items').parent().siblings('a').mouseleave(function(){
var items = $(this).parent().find('ul.items');
setTimeout(function(){
if(!in_items) items.fadeOut(300);
},200);
});
$('ul.items').mouseenter(function(){
in_items = true;
});
$('ul.items').mouseleave(function(){
$(this).fadeOut(300);
});
$('ul.items .scroll-down').click(function(){
scrollDown($(this).parent());
});
$('ul.items .scroll-up').click(function(){
scrollUp($(this).parent());
});
$('ul.items .scroll').each(function(){
if (this.addEventListener) {
if ('onwheel' in document) {
this.addEventListener ("wheel", onWheel, false);
} else if ('onmousewheel' in document) {
this.addEventListener ("mousewheel", onWheel, false);
} else {
this.addEventListener ("MozMousePixelScroll", onWheel, false);
}
} else {
this.attachEvent ("onmousewheel", onWheel);
}
function onWheel(e) {
e = e || window.event;
var delta = e.deltaY || e.detail || e.wheelDelta;
if(delta > 0){
scrollDown($(this));
} else{
scrollUp($(this));
}
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
});
});
function scrollDown(scroll){
if(scroll.find('.item li:last').is(':hidden')){
scroll.find('.item li:visible:first').fadeOut(0);
scroll.find('.item li:visible:last').next().fadeIn(0);
}
scrollChange(scroll);
}
function scrollUp(scroll){
if(scroll.find('.item li:first').is(':hidden')){
scroll.find('.item li:visible:last').fadeOut(0);
scroll.find('.item li:visible:first').prev().fadeIn(0);
}
scrollChange(scroll);
}
function scrollChange(scroll){
if(scroll.find('.item li:last').is(':visible')){
scroll.find('.scroll-down').fadeOut(300);
} else{
scroll.find('.scroll-down:hidden').fadeIn(300);
}
if(scroll.find('.item li:first').is(':visible')){
scroll.find('.scroll-up').fadeOut(300);
} else{
scroll.find('.scroll-up:hidden').fadeIn(300);
}
}
Не как не получается сделать скрол..., где ошибка.
