Question

我想在triangle/arrow右侧设arrow-td。使用下面代码的初始图表有效，但triangle/arrow不会使用其容器arrow-td滚动。

即使用户滚动arrow-td，我怎么能保持三角形相对于main-div的位置？

注意： arrow应该在main-div之外（恰到好处）。将position: relative添加到arrow-td不会起作用，因为在arrow上激活了main-div，overflow-y: auto会强制main-div进入<div class="main-div"> <table> <tbody> <tr> <td>Hello</td> </tr> <tr> <td>Hello</td> </tr> <tr> <td class="arrow-td"> <div class="left-of-arrow">With arrow</div> <div class="arrow"></div> </td> </tr> ......... </tbody> </table> </div>

查看plunker

HTML

.main-div{
  height: 200px;
  width: 200px;
  overflow-y: auto;
}

table{
    width: 100%;
    max-width: 100%;
}

td{
  width: 100%;
  background-color: #eee;
  display: flex;
}

td>div{
  display: flex;
}

.arrow{
  right: 300px;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid red;
}

CSS

<--rax----------------------------------------------------------------> (64-bit)
                                    <--eax----------------------------> (32-bit)
                                                      <--ax-----------> (16-bit)
                                                      <--ah--> <--al--> (8-bit high & low)
01100011 01100001 01110010 01110010 01111001 00100000 01101111 01101110

Answer 1

如果没有添加相对位置并将arrow宽度更改为100％并将大小设置为您的表格，则td无法跟踪您的main-div，就像我在那个plunker

See my Plunker

要做你想要的事情，你需要添加一个JavaScript函数来跟踪每次滚动页面时该{t}的offset，并设置箭头的top属性。

编辑：昨天我不在家，所以，我无法编写代码来解决你的问题。我看到了你的代码，你的方法存在一些问题。我不能在那里发表评论，因为我没有业力。但我对该分支做了一些评论，解释了为什么这些方法不那么好。

Updated Plunker

Answer 2

您的.arrow设置为绝对位置，这意味着它与您所做的任何滚动都不相关，除非您明确指定它。

因此，通过向position: relative添加.main-div，您将获得相对于.arrow-td移动的箭头。

您的设计在外观和感觉上失败的地方是.main-div本身。它的固定宽度为200px。这可能是故意的，但是为了让箭头位于表格之外，使用当前的HTML结构是不可能的。

您可以做的一件事就是 overflow 如何解决您的问题。

我决定实施一个解决方案，这是你在下面看到的...... 然而最终的实施真的取决于你！我还在第一个版本中添加了第二个版本，在名为 Example＃2 的CSS中试一试： - ）

.wrapper {
  overflow-y: auto;
  width: 335px; /* Example #2: change this to: 100% for a different visual effect */
}

.main-div {
  height: 200px;
  width: 100%; /* Example #2: change this to 200px for a different visual effect */
}

table {
  width: 100%;
  max-width: 100%;
}

td {
  width: 100%;
  background-color: #eee;
  display: flex;
}

td > div {
  display: flex;
}

.arrow {
  left: 300px;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid red;
}

.arrow-td {
  position: relative;
}

<div class="wrapper">
  <div class="main-div">
    <table>
      <tbody>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td class="arrow-td">
            <div class="left-of-arrow">With arrow</div>
            <div class="arrow"></div>
          </td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
        <tr>
          <td>Hello</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 3

这就是我通过javascript解决问题的方法：

我只是跟踪arrow-td的顶部位置，如果已更改.arrow div的顶部位置也应相应修改。

查看PLUNKER

<强>代码：

$(document).ready(function(){
  setInterval(function(){
    var heightLimit = $(".main-div").height();
    var parentTop = $(".arrow").parent().position().top;
    var arrowTop = $(".arrow").position().top;
    //Change arrow top position only if parent's position has been changed
    if(arrowTop != parentTop){
      if(parentTop < 0 || parentTop > heightLimit -25){
        $(".arrow").css("visibility","hidden");
      }
      else{
        $(".arrow").css("visibility","visible");
        $(".arrow").css("top",parentTop);
      }
    }
  },500);

});

CSS - 三角形/箭头不会与其父容器一起滚动

3 个答案: