CSS: 在不改变滚动条的情况下将元素定位在区域之外
CSS: position element outside of area without changing scrollbar
我有一个模态对话框，当模态内容太大而无法包含时，它会出现一个垂直滚动条。
我的问题是：当我想要 "popout" 模态的控件（实际上是 Twitter Typeahead https://twitter.github.io/typeahead.js/）出现时，它会导致模态上的滚动条扩展。
最好用例子来解释：
期望的行为
https://jsfiddle.net/0eara5xc/14/ 显示我想要的行为（在输入框中输入字母 'a'），但是当常规内容太大（我需要）时模式不会滚动。
不良行为
一旦我使模态可滚动，弹出窗口就会导致滚动条增加。
.modal-body {
max-height: 40vh;
overflow: hidden;
overflow-y: auto;
}
https://jsfiddle.net/0eara5xc/13/（向下滚动并在输入框中输入字母'a'）
我实际上希望弹出窗口按照第一个示例在模态之外流动。
Twitter Typeahead 控件创建了它自己的 position:relative 和 position:absolute 元素，所以我认为我不能使用 CSS 绝对定位动态创建的弹出元素。
将您的 fiddle 更新为：
.tt-menu {
background-color: red;
top:auto !important;
bottom:100%;
}
这里的问题是你想要两个相互矛盾的东西。在我找到解决方案之前，我将用几个例子来解释。
如果我们采用 in-flow 个元素（一个容器和一个内部元素），我们有两种情况：
(1) 内部元素的高度小于或等于容器的高度。在这种情况下，所有溢出（auto、scroll 和 hidden）都是相同的。
(2) 内部元素的高度比容器的高度大，在这种情况下我们：
- 保持默认行为，我们将有一个溢出，我们可以看到元素在[=114之外] =].
.el {
border:5px solid green;
height:100px;
}
.el > div {
height:200px;
width:100%;
background:red;
}
<div class="el">
<div>
</div>
</div>
- 使用
overflow:hidden 隐藏一些内部元素，因此我们 看不到 溢出的部分。
.el {
border:5px solid green;
height:100px;
overflow:hidden;
}
.el > div {
height:200px;
width:100%;
background:red;
}
<div class="el">
<div>
</div>
</div>
- 使用
overflow:scroll隐藏一些内部元素，我们只能看到溢出的部分滚动。
.el {
border:5px solid green;
height:100px;
overflow:scroll;
}
.el > div {
height:200px;
width:100%;
background:red;
}
<div class="el">
<div>
</div>
</div>
所以从技术上讲我们不能让元素溢出滚动条。
当使用 absolute:position 时，我们几乎在所有情况下都会处于情况 (2)（除非我们为容器定义了一个很大的高度），因为绝对定位的元素不在流中并且是 在容器的高度计算中没有考虑所以逻辑上内部元素的高度会更大并且应用上面相同的逻辑：
.el {
border:5px solid green;
position:relative;
}
.el > div {
height:100px;
background:red;
}
.el > div:last-child {
position:absolute;
background:blue;
right:0;
left:0;
}
<div class="el">
<div>
we see the element
</div>
<div>
</div>
</div>
<div class="el" style="overflow:hidden;margin-top:100px;">
<div>
we don't see the element
</div>
<div>
</div>
</div>
<div class="el" style="overflow:scroll;">
<div>
we see the element element on scroll
</div>
<div>
</div>
</div>
即使 overflow 属性 设置为绝对定位元素的另一个元素祖先，同样的逻辑也适用。如您所见 here:
In most cases, overflow can be computed for any box from the bounds
and properties of that box itself, plus the overflow of each of its
children.
因此，当任何子元素的高度增加或溢出时，使用 overflow:scroll 将始终使滚动增加，并且无法在外部放置任何溢出元素，因为这是默认行为，而且您通过设置 overflow:scroll.
来改变它
解决方法
避免将滚动应用到您的元素的第一个简单解决方案是使元素相对于您应用滚动的元素的祖先定位。换句话说：在带有 overflow:scroll 的元素和绝对定位元素之间，你不应该找到任何定位元素。正如您在这个 complex 语句 here:
中所读到的
... a box may overflow, meaning its content lies partly or entirely
outside of the box, e.g.:
[...]
A descendant box is positioned absolutely, partly outside the box.
Such boxes are not always clipped by the overflow property on their
ancestors; specifically, they are not clipped by the overflow of any
ancestor between themselves and their containing block
这个解决方案当然会破坏你的代码。
另一个想法是制作元素 position:fixed。像这样它将相对于浏览器 window 并且我们可以在滚动条之外看到它但是很难使用 CSS 来调整它的位置。这种情况下我们可以考虑一些JS来动态调整元素的位置：
$('.typeahead').on('keypress change',function(e){
var y = $(this).offset().top + $(this).height();
var x = $(this).offset().left;
$('.tt-menu').css('top',y);
$('.tt-menu').css('left',x);
})
如你所见，我们只是根据输入的位置计算出元素的top/left位置
完整代码如下：
$(function () {
$('.typeahead').on('keypress change',function(e){
var y = $(this).offset().top + $(this).height()+5;
var x = $(this).offset().left;
$('.tt-menu').css('top',y);
$('.tt-menu').css('left',x);
})
$('#btnPopup').on('click', function(){
$('#divPopup').toggle();
});
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});
});
.modal-body {
max-height: 40vh;
overflow: hidden;
overflow-y: auto;
}
.modal-header, .modal-footer {
background-color: black;
color: white;
}
#divSpacer {
height: 40vh;
background-color: rgb(220, 220, 220);
}
.tt-menu {
background-color: red;
position:fixed!important;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<div>
<div class="modal-lg">
<div class="modal-header">
My modal title
</div>
<div class="modal-body">
<div id="divSpacer">
Lots of space taken up here...
</div>
<input class="typeahead" type="text" placeholder="States of USA">
</div>
<div class="modal-footer">
</div>
</div>
</div>
我有一个模态对话框，当模态内容太大而无法包含时，它会出现一个垂直滚动条。
我的问题是：当我想要 "popout" 模态的控件（实际上是 Twitter Typeahead https://twitter.github.io/typeahead.js/）出现时，它会导致模态上的滚动条扩展。
最好用例子来解释：
期望的行为
https://jsfiddle.net/0eara5xc/14/ 显示我想要的行为（在输入框中输入字母 'a'），但是当常规内容太大（我需要）时模式不会滚动。
不良行为
一旦我使模态可滚动，弹出窗口就会导致滚动条增加。
.modal-body {
max-height: 40vh;
overflow: hidden;
overflow-y: auto;
}
https://jsfiddle.net/0eara5xc/13/（向下滚动并在输入框中输入字母'a'） 我实际上希望弹出窗口按照第一个示例在模态之外流动。
Twitter Typeahead 控件创建了它自己的 position:relative 和 position:absolute 元素，所以我认为我不能使用 CSS 绝对定位动态创建的弹出元素。
将您的 fiddle 更新为：
.tt-menu {
background-color: red;
top:auto !important;
bottom:100%;
}
这里的问题是你想要两个相互矛盾的东西。在我找到解决方案之前，我将用几个例子来解释。
如果我们采用 in-flow 个元素（一个容器和一个内部元素），我们有两种情况：
(1) 内部元素的高度小于或等于容器的高度。在这种情况下，所有溢出（auto、scroll 和 hidden）都是相同的。
(2) 内部元素的高度比容器的高度大，在这种情况下我们：
- 保持默认行为，我们将有一个溢出，我们可以看到元素在[=114之外] =].
.el {
border:5px solid green;
height:100px;
}
.el > div {
height:200px;
width:100%;
background:red;
}
<div class="el">
<div>
</div>
</div>
- 使用
overflow:hidden隐藏一些内部元素，因此我们 看不到 溢出的部分。
.el {
border:5px solid green;
height:100px;
overflow:hidden;
}
.el > div {
height:200px;
width:100%;
background:red;
}
<div class="el">
<div>
</div>
</div>
- 使用
overflow:scroll隐藏一些内部元素，我们只能看到溢出的部分滚动。
.el {
border:5px solid green;
height:100px;
overflow:scroll;
}
.el > div {
height:200px;
width:100%;
background:red;
}
<div class="el">
<div>
</div>
</div>
所以从技术上讲我们不能让元素溢出滚动条。
当使用 absolute:position 时，我们几乎在所有情况下都会处于情况 (2)（除非我们为容器定义了一个很大的高度），因为绝对定位的元素不在流中并且是 在容器的高度计算中没有考虑所以逻辑上内部元素的高度会更大并且应用上面相同的逻辑：
.el {
border:5px solid green;
position:relative;
}
.el > div {
height:100px;
background:red;
}
.el > div:last-child {
position:absolute;
background:blue;
right:0;
left:0;
}
<div class="el">
<div>
we see the element
</div>
<div>
</div>
</div>
<div class="el" style="overflow:hidden;margin-top:100px;">
<div>
we don't see the element
</div>
<div>
</div>
</div>
<div class="el" style="overflow:scroll;">
<div>
we see the element element on scroll
</div>
<div>
</div>
</div>
即使 overflow 属性 设置为绝对定位元素的另一个元素祖先，同样的逻辑也适用。如您所见 here:
In most cases, overflow can be computed for any box from the bounds and properties of that box itself, plus the overflow of each of its children.
因此，当任何子元素的高度增加或溢出时，使用 overflow:scroll 将始终使滚动增加，并且无法在外部放置任何溢出元素，因为这是默认行为，而且您通过设置 overflow:scroll.
解决方法
避免将滚动应用到您的元素的第一个简单解决方案是使元素相对于您应用滚动的元素的祖先定位。换句话说：在带有 overflow:scroll 的元素和绝对定位元素之间，你不应该找到任何定位元素。正如您在这个 complex 语句 here:
... a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
[...]
A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block
这个解决方案当然会破坏你的代码。
另一个想法是制作元素 position:fixed。像这样它将相对于浏览器 window 并且我们可以在滚动条之外看到它但是很难使用 CSS 来调整它的位置。这种情况下我们可以考虑一些JS来动态调整元素的位置：
$('.typeahead').on('keypress change',function(e){
var y = $(this).offset().top + $(this).height();
var x = $(this).offset().left;
$('.tt-menu').css('top',y);
$('.tt-menu').css('left',x);
})
如你所见，我们只是根据输入的位置计算出元素的top/left位置
完整代码如下：
$(function () {
$('.typeahead').on('keypress change',function(e){
var y = $(this).offset().top + $(this).height()+5;
var x = $(this).offset().left;
$('.tt-menu').css('top',y);
$('.tt-menu').css('left',x);
})
$('#btnPopup').on('click', function(){
$('#divPopup').toggle();
});
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});
});
.modal-body {
max-height: 40vh;
overflow: hidden;
overflow-y: auto;
}
.modal-header, .modal-footer {
background-color: black;
color: white;
}
#divSpacer {
height: 40vh;
background-color: rgb(220, 220, 220);
}
.tt-menu {
background-color: red;
position:fixed!important;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<div>
<div class="modal-lg">
<div class="modal-header">
My modal title
</div>
<div class="modal-body">
<div id="divSpacer">
Lots of space taken up here...
</div>
<input class="typeahead" type="text" placeholder="States of USA">
</div>
<div class="modal-footer">
</div>
</div>
</div>