【问题标题】:IE11 style.maxHeight not set from cssIE11 style.maxHeight 未从 css 设置
【发布时间】:2013-12-21 13:48:52
【问题描述】:

目的:当内部内容超过最大高度时添加滚动条,否则设置为隐藏溢出(设置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>

建议会有所帮助。可能有更好的方法来做我正在做的事情,但我不希望滚动条(即使它在一段时间后消失)在不需要时出现。

【问题讨论】:

  • .style 对象仅显示直接在元素上设置的 CSS 属性。
  • 我在发布之前正在阅读 SO,有人说如果设置了 CSS 高度,则应该设置 style.height?他们错了吗?
  • 是的,他们错了。
  • 除非在 JS 本身中设置,否则没有办法学习应用于对象的 css 样式吗?
  • 搜索getComputedStyle()

标签: javascript css internet-explorer internet-explorer-11


【解决方案1】:

如果你只是做一个垂直滚动,那很简单。这是我使用的标记:

<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; 触摸动作:pan-x; }

.y-scroller-wrapper { -ms-touch-action: pan-y; 触摸动作:pan-y; 溢出:隐藏; 溢出-x:隐藏; 溢出-y:滚动; }

我现在有一个工作演示,您需要将浏览器宽度减小到 http://pentonmovies.love2dev.com/

如果您好奇,垂直到水平是通过媒体查询管理的,以获得响应式效果。我需要从 resize 事件更改为媒体查询侦听器,以使其现在变得更好;)

IE 还具有其他平台目前不具备的出色触感和原生滚动支持。希望对您有所帮助。

【讨论】:

    猜你喜欢
    • 2018-07-03
    • 1970-01-01
    • 1970-01-01
    • 2014-09-22
    • 2013-11-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-22
    相关资源
    最近更新 更多