Question

我正在使用本机jquery ui菜单并试图让它滚动。我发现它实际上内置了这种行为（有点）。我不确定这是否是故意的。

/////////////////////////////////// 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图标攻击了一些显示箭头，但感觉不太对劲。通过将它们放在右边，它们模仿滚动条，但是你无法点击它们。

理想情况下，我想要的是箭头居中，但当你将它们悬停时，列表仍然是可滚动的。通过使用跨度我可以实现定位，但然后文本在下面可见，只是看起来很糟糕。通过使用div它看起来更干净，但整个区域不能滚动。

我正在寻找一种更好，更清洁，更直观的方式来实现这一目标。

Answer 1

这里是侧面滚动，这里没有js，但很明显

 #menu {
          overflow-y: scroll;
          overflow-x: hidden;
          height: 200px;
          width: 200px;
        } 

  <ul id="menu">
        <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>
    </ul>

JQuery UI菜单滚动

1 个答案: