目标:当内部内容超过最大高度时添加滚动条,否则设置为 overflow hidden (如设置overflow-y: scroll
时显示滚动条)
上下文:这是在win8.1应用中(所以ie11三叉戟)
问题:#table-wrapper
div 上的style.maxHeight
设置为''
我的CSS
#threads table {
width: 100%;
}
#table-wrapper {
max-height: 600px;
}
我的Js
var threadTable = document.getElementById('thread-table');
var tableWrapper = document.getElementById('table-wrapper');
if (threadTable.clientHeight > tableWrapper.style.maxHeight) {
tableWrapper.style.overflowY = 'scroll';
} else {
tableWrapper.style.overflowY = 'hidden';
}
我的 html
<div id="threads" class="info">
<h3>IE Build Info</h3>
<div id="table-wrapper">
<table id="thread-table"></table>
</div>
</div>
建议会很有帮助。可能有更好的方法来完成我正在做的事情,但我不希望滚动条(即使它会在一段时间后消失)在不需要的时候出现。
最佳答案
如果你只是做一个垂直滚动,那就很简单了。这是我使用的标记:
<div class="y-scroller-wrapper movie-showtimes-scroller">
<div class="movie-showtimes-wrapper">
<!-- Items go here -->
</div>
</div>
y-scroller 包装器是设置溢出的容器。宽度必须是 100%,高度也是其容器的 100%。所以这需要在具有固定尺寸的东西里面。很多时候,在我的现代布局中,主要元素都是绝对定位的,因此我可以进行流畅的布局。
这是 CSS:
.x-scroller-wrapper, .xy-scroller-wrapper, .y-scroller-wrapper {
-webkit-overflow-style: none;
-ms-overflow-style: none;
-moz-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow-style: none;
-ms-scroll-chaining: none;
-ms-scroll-snap-type: proximity;
-ms-scroll-translation: vertical-to-horizontal;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 0;
width: 100%;
height: 100%;
.x-scroller-wrapper { -ms-touch-action: pan-x; 触摸 Action :pan-x;
.y-scroller-wrapper { -ms-touch-action: pan-y; 触摸 Action :pan-y; 溢出:隐藏; 溢出-x:隐藏; 溢出-y:滚动;
我现在有一个工作演示,您需要将浏览器宽度减小到 < 600 像素以进行垂直滚动。如果它更宽,它会调整为水平滚动。看起来有一个错误,如果你手动缩小它就不能正确调整大小,所以如果它没有重置,就以小宽度刷新。 http://pentonmovies.love2dev.com/
如果您好奇垂直到水平是通过媒体查询管理的,以实现响应效果。我需要从调整大小事件更改为媒体查询监听器,以使其现在变得更好;)
此外,IE 还具有其他平台目前所不具备的出色触控和 native 滚动支持。希望对您有所帮助。
关于javascript - IE11 style.maxHeight 不是从 css 设置的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20386142/