Javascript - 滚动

Question

我这里有一个jsfiddle - https://jsfiddle.net/4eohzxwn/1/

    $("div").scroll(function(){
        $('.static').css({
        "position": "absolute", "top": 0

        });
    });

当其余的表格滚动时，我需要修复左静态列。

我认为Jquery / javascript是唯一的选择。

是否可以将红色静态元素保留在位置并滚动表格的其余部分。

我还需要在滚动时保持行高，这样它就不会只去一行

Answer 1

试用此代码

使用position代替$("#wrap").scroll(function(){ var translate = "translate("+this.scrollLeft + "px,0)"; $('.static').css('transform',translate); });

＆＃13;

＆＃13;

table{
  width: 600px;
}

.static{
  border: 1px solid red;
  width: 100px;
  word-wrap: break-word;
  background-color:#fff;
}

.scroll{
  border: 1px solid green;
  width: 500px;
}

#wrap{
  border: 1px solid blue;
  width: 400px;
  overflow: scroll;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <table>
    <tbody>
      <tr>
        <td class="static">Staticdfxcvzx
        cvzxcvzxcv</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

public class MyRestResponse{
    private String message;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

你看过这个问题吗？ HTML table with horizontal scrolling (first column fixed)

你在你的代码片段中使用了jQuery，在答案中有一个似乎可以解决你的问题的this plugin链接，但你可以用CSS实现你想要的。

Answer 3

您可以使用简单的html和css执行此操作，无需为此编写jquery。请参阅下面的代码。

table{
  width: 600px;
}

.static{
  border: 1px solid red;
  width: 100px;
  word-wrap: break-word;
   position:absolute;
            width:5em;
            left:0;
            top:auto;
}

.scroll{
  border: 1px solid green;
  width: 500px;
}

#outerdiv {
            position: absolute;
            top: 0;
            left: 0;
            right: 5em;
        }
        #innerdiv {
            width: 100%;
            overflow-x:scroll;
            margin-left: 5em;
            overflow-y:visible;
            padding-bottom:1px;
        }
        .headcol {
            position:absolute;
            width:5em;
            left:0;
            top:auto;
            border-right: 0px none black;
            border-top-width:3px;
            /*only relevant for first row*/
            margin-top:-3px;
            /*compensate for top border*/
        }

<div id="outerdiv">
    <div id="innerdiv">
  <table>
    <tbody>
      <tr>
        <td class="static">Staticdfxc</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Answer 4

$("#wrap").scroll(function(){
  var translate = "translate("+this.scrollLeft + "px,0)";
  $('.static').css('transform',translate);
});

table{
  width: 600px;
}

.static{
  border: 1px solid red;
  width: 100px;
  word-wrap: break-word;
}

.scroll{
  border: 1px solid green;
  width: 500px;
}

#wrap{
  border: 1px solid blue;
  width: 400px;
  overflow: scroll;
  position: relative;
}
.static
{
background-color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <table>
    <tbody>
      <tr>
        <td class="static">Staticdfxcvzx
        cvzxcvzxcv</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
    </tbody>
  </table>
</div>