有没有办法防止绝对定位的元素在设置overflow-y时触发滚动条?我认为它不会,因为绝对定位的元素通常不会影响父元素的宽度/高度.出于某种原因,在设置overflow-y:auto时确定是否显示滚动条似乎并不重要.有没有办法解决这个问题,而不将下拉内容放在DOM中完全不同的位置?
我只希望通常会使元素增长的东西能够触发滚动条.
解决方法
由于性能问题,IMO用户代理在包装器中呈现绝对定位的元素,而不是以这种方式显示溢出.
因为在滚动期间他们必须重新绘制(并改变位置)与containing block相关的绝对定位元素.
在浮子的存在下发生同样的事情 – 见:
一种可能的选择是让绝对定位的元素相对于initial containing block(< html>元素所在的位置)而不是位置.
为了实现这一点,我们可以从#dialog-1中删除position:relative,因此绝对定位元素的包含块将是初始包含块.它也随页面一起滚动.
function forAllNodes(nodes,fn) { Array.prototype.forEach.call( nodes,function(node) { fn.call(node); } ); } var layoutGate = function() { forAllNodes( document.querySelectorAll('.dropdown-contents'),function() { if (this.classList) this.classList.toggle('hide'); } ); }; var intervalId = setInterval(layoutGate,1000); forAllNodes( document.querySelectorAll('.toggle-dropdown-btn'),function() { var elm = this; elm.addEventListener('click',function() { if (intervalId) { clearInterval(intervalId); intervalId = null; } layoutGate(); },false); } );
.wrapper { padding-left: 20px; } p { line-height: 1.3em; } #dialog-1 { padding: 10px; border: 3px solid black; width: 400px; min-height: 100px; max-height: 150px; overflow-y: auto; } .dropdown-control { /* position: relative; */ margin: 0; padding: 0; } .toggle-dropdown-btn { padding: 0; margin: 0; } .dropdown-contents { list-style-type: none; position: absolute; /* min-width: 100%; */ width: 400px; background-color: #81d4fa; margin: 0; padding: 0; border: 1px solid green; /* top: 100%; */ /* left: 0; */ } #dialog-2 { padding: 10px; border: 3px solid black; width: 400px; min-height: 100px; max-height: 150px; } .hide { display: none; }
<div class="wrapper"> <h1>Div with overflow-y:</h1> <div id="dialog-1"> <p>Stuff in Dialog blah blah</p> <div class="dropdown-control"> <button type="button" class="toggle-dropdown-btn">Toggle Dropdown</button> <ul class="dropdown-contents"> <li>why</li> <li>do i </li> <li>trigger </li> <li>scroll</li> </ul> </div> </div> <h1>normal div,no overflow-y</h1> <div id="dialog-2"> <p>Stuff in Dialog blah blah</p> <div class="dropdown-control"> <button type="button" class="toggle-dropdown-btn">Toggle Dropdown</button> <ul class="dropdown-contents"> <li>this</li> <li>does not </li> <li>grow </li> <li>the div</li> </ul> </div> </div> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。