创建带有内部滚动条的可拖动、可调整大小的 div 容器答案

【问题标题】：Creating a draggable, resizable div container with inner scrollbars创建带有内部滚动条的可拖动、可调整大小的 div 容器
【发布时间】：2015-01-05 17:25:29
【问题描述】：

我有一个容器，由一个外部 div 和一个滚动的内部 div 组成，如下所示：（注意这是我实际所做的精简版）

HTML：

<div class="faq-clone">
    <div class="faq-clone-content">
        Some text goes here.
    </div>
</div>

CSS：

.faq-clone {
    overflow: auto;
}

.faq-clone-content {
    overflow: auto;
    width: 375px; 
    max-height: 400px;
}

这个想法是让.faq-clone 可拖动和调整大小，但结果滚动条仍然只出现在内部 div 上，faq-clone-content。我正在处理一个现有项目，所以我只是在 jQuery 中添加了.draggable()，如下面的小提琴所示：

足够简单，它仍然可以正常工作。为了调整大小，我了解 CSS 需要更改。我将.resizable() 添加到.faq-clone 并调整了CSS，以使外部容器的宽度/高度设置为隐藏，如下所示：

容器大小调整正常，但内部滚动条丢失。在.faq-clone 上更改overflow:hidden 似乎不是答案，但没有它我会在外部div 上获得滚动条，这是不可取的。关于如何设置 CSS 来实现这一点的任何想法？

【问题讨论】：

看起来问题是使用 .resizable。这家伙添加了一个 div 并明确设置溢出：jsfiddle.net/Ka7P2/2。他们让它工作。在您的情况下，也许添加一个内部元素，您可以在其上设置 overflow: auto?

【解决方案1】：

使用 jQuery 将 faq-clone-content 设置为其父 faq-clone 的大小似乎可以解决问题。

$(".faq-clone-content").css('height', faqClone.height() + 'px');

【讨论】：