我正在使用原生的jquery ui菜单,并尝试让它滚动。我发现它实际上已经内置了这种行为(有点)。我不确定这是否是有意的。
这是我能想到的最好方案,但我并不满意。我不得不增加顶部和底部填充以便有更大的可滚动区域。虽然这本身并不糟糕,但也不理想。我最担心的是如何向用户展示这个列表是可以滚动的。我使用了jquery ui图标来添加显示箭头,但感觉还不够完美。将它们放在右边会模仿滚动条,但不能点击。
理想情况下,我希望箭头居中,但当你悬停在它们上面时,列表仍然可以滚动。通过使用span标签,我可以实现位置定位,但文本会显示在下面,看起来很糟糕。通过使用div标签,看起来更清晰,但整个区域都不能滚动。
我正在寻找更好、更清晰、更直观的实现方式。
/////////////////////////////////// HTML ////////////////////////////////////////////
<div id="container">
<ul id="menu">
<div id="scrollup">
<span class="ui-icon ui-icon-triangle-1-n"></span>
</div>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
<li><a href="#">Item 13</a></li>
<li><a href="#">Item 14</a></li>
<li><a href="#">Item 15</a></li>
<li><a href="#">Item 16</a></li>
<li><a href="#">Item 17</a></li>
<li><a href="#">Item 18</a></li>
<li><a href="#">Item 19</a></li>
<li><a href="#">Item 20</a></li>
<li><a href="#">Item 21</a></li>
<li><a href="#">Item 22</a></li>
<div id="scrolldown">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</ul>
</div>
/////////////////////////////////// CSS ////////////////////////////////////////////
#container {
height: 350px;
background: #ccc;
}
#menu {
max-height: 75%;
width: 100px;
padding: 25px 0;
overflow: hidden;
margin: 20px;
}
#menu #scrollup,
#menu #scrolldown {
position: absolute;
width: 16px;
height: 16px;
top: 15px;
left: 113px;
}
#menu #scrolldown {
top: 311px;
}
/////////////////////////////////// JQUERY //////////////////////////////////////////
$('#menu').menu().removeClass('ui-menu-icons');
这是我能想到的最好方案,但我并不满意。我不得不增加顶部和底部填充以便有更大的可滚动区域。虽然这本身并不糟糕,但也不理想。我最担心的是如何向用户展示这个列表是可以滚动的。我使用了jquery ui图标来添加显示箭头,但感觉还不够完美。将它们放在右边会模仿滚动条,但不能点击。
理想情况下,我希望箭头居中,但当你悬停在它们上面时,列表仍然可以滚动。通过使用span标签,我可以实现位置定位,但文本会显示在下面,看起来很糟糕。通过使用div标签,看起来更清晰,但整个区域都不能滚动。
我正在寻找更好、更清晰、更直观的实现方式。