CSS-垂直滚动和子转义容器 [英] css - vertical scrolling and child escaping the container

问题描述

我想使用可排序的jquery来重新排列项目列表.我希望列表可以滚动(垂直)，同时将可排序的句柄弹出到列表的右侧.

I want to use a jquery sortable to rearrange a list of items. I would like my list to be scrollable (vertically) while having the sortable handle popped out to the right of the list.

要为标记制作原型，我创建了一个列表，并定位了手柄，使其向右弹出，但是一旦我打开垂直滚动，它就会在两个轴上滚动，并且我会松开弹出框(它是隐藏的并且您需要将其滚动查看，而我真的只是希望它在列表外弹出).

To prototype the markup, I've created a list, and positioned the handle so it pops out to the right, but as soon as I turn on vertical scrolling it scrolls on both axes and I loose my popover (it is hidden and you need to scroll it in to view while I really just want it to pop up outside the list).

删除overflow-y:滚动表示它可以正确呈现，但是现在我无法垂直滚动.

Removing the overflow-y: scroll means it renders correctly but now I can't vertically scroll.

有什么我可以做的工作吗?

Is there any thing I can do to make this work?

(我也尝试过使用位于可排序dom结构之外的可排序句柄，但可排序似乎不喜欢可排序项未包含的句柄.)

(I've also tried using a sortable handle which is outside the sortable dom structure but sortable doesn't seem to like handles which aren't contained by the sortable item.)

谢谢.

http://jsfiddle.net/Lqfxp1eh/1/

<style>
#container {
    width: 300px;
    height: 200px;
    border: 1px solid #0000ff;

    /* adding this stops the .pop boxes from escaping the container */
    overflow-y: scroll; 
}
#container li {
    border: 1px solid #00ff00;
    position: relative;
}
#container .pop {
    width: 220px;
    height: 40px;
    top: -10px;
    left: 130px;
    border: 2px solid #0000ff;
    position: absolute;
}

</style>
<div id="container">
    <div>
        <ul>
            <li>1</li>
            <li>2
                <div class="pop"></div>
            </li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>

    </div>
</div>

推荐答案

http://jsfiddle.net/Lqfxp1eh /5/

将.pop div从可滚动容器中移出，并将其放在新的父对象上

move your .pop div out of the scrollable container, and position it against the new parent

我不确定可排序"部分，因为相关代码似乎丢失了?

I'm not sure about the 'sortable' part as the relevant code seems to be missing?

这篇关于CSS-垂直滚动和子转义容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！