3

ネイティブのjquery uiメニューを使用してスクロールしようとしています。実際にこの動作が組み込まれていることがわかりました（一種の）。意図的かどうかはわかりません。

JSFiddleデモ

/////////////////////////////////// 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 を使用するときれいに見えますが、領域全体をスクロールできません。

これを実装するための、より優れた、よりクリーンで直感的な方法を探しています。

4

1 に答える 1

7

これは横にスクロールしていますが、明らかに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>
于 2013-04-01T00:59:45.217 に答える