IE11 style.maxHeight未从css设置

IE11 style.maxHeight not set from css

本文关键字：css 设置 未从 maxHeight style IE11      更新时间：2024-03-27

目标：当内部内容超过最大高度时添加滚动条，否则设置为隐藏溢出（如设置overflow-y: scroll时显示滚动条）

上下文：这是在win8.1应用程序（所以ie11三叉戟）中

问题：#table-wrapperdiv上的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-滚动器-包装器{-ms触摸动作：pan-x；触摸动作：pan-x；}

.y-滚动器-包装器{-ms触摸动作：pan-y；触摸动作：pan-y；溢出：隐藏；overflow-x：隐藏；overflow-y：滚动；}

我现在有一个工作演示，你需要将浏览器宽度缩小到<600像素用于垂直滚动。如果较宽，则会调整为水平滚动。如果手动收缩，它看起来有一个错误，无法正确调整大小，所以如果不重置，只需以小宽度刷新即可。http://pentonmovies.love2dev.com/

如果你很好奇，垂直到水平是通过媒体查询来管理的，以获得响应效果。我需要从调整大小事件更改为媒体查询侦听器，以使其更好；）

此外，IE有一些很棒的触摸和原生滚动支持，而其他平台目前还没有。我希望这能帮助你。

相关文章：