Question

我有一个模式弹出窗口中的项目列表，它具有固定高度和溢出自动，并且有一些带有ID的“字母”标题：

<ul id="itemList">
    <div id="c_A">A</div>
    <li>Alpha</li>
    <li>Alpha 2</li>
    <li>Alpha 3</li>
    <div id="c_B">B</div>
    <li>Beta</li>
    <li>Beta 2</li>
    <div id="c_C">C</div>
    <li>Charlie</li>
    <li>Charlie 2</li>
    <li>Charlie 3</li>
    <li>Charlie 4</li>
    <div id="c_D">D</div>
    <li>Dog</li>
    <div id="c_E">E</div>
    <li>Echo</li>
    <div id="c_F">F</div>
    <li>Fox</li>
</ul>

让我们举例说，高度设置为只显示4个项目（例如高度：100px;字体18），你必须滚动查看其余部分（非常小的例子，实际列表有100个项目）

然后我有另一个包含所有字母的列表：

<ul id="letterList">
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_A')" id="sc_A">A</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_B')" id="sc_B">B</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_C')" id="sc_C">C</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_D')" id="sc_D">D</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_E')" id="sc_E">E</div>
    </li>
    <li>
        <div class="letterSelector" onclick="ScrollToID('c_F')" id="sc_F">F</div>
    </li>
</ul>

最初，我使用<a href="#c_A">A</a> - 但是这会将整个页面以及模式弹出窗口“列表”滚动到顶部。这会导致错误，因为事情并不恰当。

我需要做的是滚动项目列表（#itemList）而不是其他内容。我还没有发现只滚动特定列表而不是整页的任何内容。

我在我的项目中使用jQuery和jQuery UI（模式弹出窗口包含3个选项卡，一个用于城市，另一个用于街道，另一个用于街道号码）。

Answer 1

您可以查看此帖子：Get position/offset of element relative to a parent container?并使用该方式获取元素相对于其父级的位置。

然后，您可以将整个列表放在div中（与位置相对）并将绝对位置设置为列表。

之后，您可以修改函数以将列表设置为其中所需div的位置。例如，如果第二个div是100px top，则可以将整个列表移动到-100px top，然后第二个div将是容器内的第一个div。

希望这有帮助，

此致

马塞洛

滚动到列表中的元素（但不滚动页面）

1 个答案: