javascript - 调整窗口大小时,转换后的元素不遵守 Firefox 上的绝对位置

标签 javascript jquery css firefox

我在这个问题上花了很多时间,但似乎找不到解决方法。我正在尝试创建一个带有固定标题的表格,该表格可以水平和垂直滚动。但是,我偶然发现了一个我无法解释的非常奇怪的错误。

这个想法很简单。表格位于 scrollable 父级内,父级位于绝对定位的 container 内。表格标题标签放置在 span 元素内,并且绝对位于顶部。当 scrollable 元素滚动时,使用 Javascript 将使用 css 转换移动 span 元素。以下是所用代码的示例代码。

HTML:

<div class="container">
  <div class="scrollable">
    <table>
      <thead>
        <tr>
          <th><span>Column 1</span></th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Table cell content</td>
          ...
       </tr>  
    </table>  
  </div>
</div>

Javascript:

$('.scrollable').on('scroll', function() {
  scrollX=$(this).scrollLeft();
  $(this).find('th span').attr('style', 'transform:translateX(' + -scrollX + 'px)');
})

下面是一段代码: https://jsfiddle.net/rts4gd5x/

代码在我测试的所有浏览器(ie11,即 edge、chrome、safari)中都可以正常工作,但仅在 Firefox 中我遇到了以下问题。

如果您滚动 scrollable 元素然后调整窗口大小,则 span 元素的位置会出现异常,我无法确定是什么在困扰它。从零滚动调整大小,然后滚动正常工作。

我已经尝试了所有我能想到的方法,将 transform:translateZ(0) 添加到父级,添加 min-width 等,但我尝试过的 hack 都没有用.在 span 元素上使用 fixed 定位可以调整以在这个简化的布局上工作,但我正在处理的实际布局需要 absolute 定位跨度。该解决方案的所有其他浏览器都按预期工作。

最佳答案

我尝试了几种方法在调整大小时进行刷新,但没有成功,所以这里是另一个选项,我使用 margin-left 代替。

同样,Firefox 的行为与其他浏览器不同,所以通过一个简单的浏览器检测(抱歉那个,仅用于此演示,建议以更正确的方式执行此操作)我让它工作

Updated fiddle

$('.scrollable').on('scroll', function() {
 scrollX=$(this).scrollLeft();
 
 // Firefox
 if (!(window.mozInnerScreenX == null)) {
   $(this).find('thead').attr('style', 'margin-left: ' + -scrollX + 'px');
   
 // the rest
 } else { 
   $(this).find('th span').attr('style', 'margin-left: ' + -scrollX + 'px');
 }
})
.container {
  position:absolute;
  top:20px;
  right:20px;
  left:20px;
  height:200px;
  padding-top:40px;
  overflow:hidden;
}
.scrollable {
  width:100%;
  height:100%;
  overflow-x:auto;
  background:white;
}
table {
  width:100%;
  text-align:left;
}
table th span {
  position:absolute;
  top:0;
  border-left:1px solid #ccc;
  display:block;
  width:100%;
  line-height:40px;
  background:#fff;
  margin-left:-1px;
}

table td {
  white-space:nowrap;
  border-left:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="scrollable">
<table>
<thead>
  <tr>
    <th><span>Column 1</span></th>
    <th><span>Column 2</span></th>
    <th><span>Column 3</span></th>
    <th><span>Column 4</span></th>
    <th><span>Column 5</span></th>
    <th><span>Column 6</span></th>
    <th><span>Column 7</span></th>
    <th><span>Column 8</span></th>
    <th><span>Column 9</span></th>
    <th><span>Column 10</span></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
    <tr>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
    <td>Table cell content</td>
  </tr>
</tbody>
</table>
</div>
</div>

关于javascript - 调整窗口大小时,转换后的元素不遵守 Firefox 上的绝对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43641865/

相关文章:

jquery - 如何使用 toggleclass 仅显示当前事件元素以及如何获取事件类名

html - 如何更改 branch.io 中深度 View html 页面的样式? (创建自定义样式)

javascript - Ember.js 将参数从 View 传递到 Controller 函数

JavascriptExecutor (Selenium WebDriver C#) 不断返回空对象

javascript - Browserify-shim - 如何将两个全局变量从一个包传递到另一个包中

javascript - 将原型(prototype)/方法添加到 jQuery val();

jquery - 如何使元素完全适合页面折叠

javascript - 你能用 jquery 做到这一点吗?

javascript - 单击一次后禁用按钮

javascript - jquery show() 无法正确显示 highcharts 图表