是否可以禁用外部元素的滚动并保持内部元素的滚动？答案

【问题标题】：Is it possible to disable scrolling on an outside element and maintain scrolling on inner element?是否可以禁用外部元素的滚动并保持内部元素的滚动？
【发布时间】：2014-09-06 01:01:21
【问题描述】：

我使用的是 Twitter BS 2.1 版。基本上我有一个模态，将有 2 个并排的 div。假设 div1 的高度为 700px，我想将外部 div 限制为 400px。 div2 的最大高度将是外部 div 的高度。

不幸的是，外部 div 正在滚动，而内部 div 的滚动条只能滚动大约 10 像素。我试过溢出：隐藏在外部 div 上，但没有运气。

这就是它现在的样子：http://jsfiddle.net/sLqkdbr3/3/。非常感谢您的帮助，谢谢！

这是我的 html，因为我不得不粘贴它：

<body>
    <div class='show_location_picker'>Click to Show</div>
    <div class="modal hide fade" id='locationModal'>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h3>Select Location</h3>

        </div>
        <div class="modal-body">
            <div class="row span10">Enter your address
                <input type='address' />
            </div>
            <div class="row center" style='overflow: hidden'>
                <div class="span3" style='overflow: scroll'>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                </div>
                <div class="span5">
                    <div id="map_canvas" data-lat='44.616698' data-long='-69.416702'></div>
                </div>
            </div>
        </div>
        <div class="modal-footer"> <a href="#" class="btn">Close</a>
 <a href="#" class="btn btn-primary">Save changes</a>

        </div>
    </div>
</body>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

你可以做到，你要对css做些小改动，首先改变modal body overflow可见：

.modal-body {
    max-height: 400px;
    overflow-y: visible;
    padding: 15px;
    position: relative;
}

并给内部 div 一些高度和溢出来滚动：

.span3 {
    max-height: 400px;
    width: 220px;
    overflow:scroll;
}

我目前已将 css 添加到两个 div 上应用的类中。您可以调整它们而不是修改引导程序原始 css。

更新的小提琴：

http://jsfiddle.net/sLqkdbr3/7/

【讨论】：