我有一个要求，我应该有用于整个表格的垂直滚动条，而对于中间列应该有水平滚动条

Question

document.getElementById("top").onscroll = function()
        {

        var div = document.getElementById("top").scrollTop;
        var div1 = document.getElementById("top1").scrollTop;
       
        var div2top = document.getElementById("d3").scrollTop;
        var div2left = document.getElementById("d3").scrollLeft;
        if(div>0){
        	c = document.getElementById("d3");
          c.scrollTo(div2left, div);
        }
            
       var offsetHeight = 0;
    var scrollHeight = 0;     

           
        }

.table-wrapper { 
    
    display:flex;
    height:100px;
    overflow-y:scroll;
    box-sizing:border-box;
}
.innerdiv{
  //height:200px;
  height:100px;
  display:flex;
}
.d{
  //float:left;
 // position:relative;
}
.d3{
  position:absolute;
  width:100px;
  height:100px;
  left:290px;
  overflow-x:overlay;
  overflow-y:none;
}
#d3::-webkit-scrollbar {
    width: 0px;
    height:5px;
    background-color: #F5F5F5;
}
.d4{
  margin-left:100px;
}

<div onscroll="scroll();" class="table-wrapper" id="top">
    <div class="innerdiv" id="top1">
    
    <div class="d d1">
      <table>
        <thead>
          <tr>
            <th>Heading1</th>
            <th>Heading2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
        </tbody>
      </table>
    </div>
    <div class="d d2">
      <table>
        <thead>
          <tr>
            <th>Heading3</th>
            <th>Heading4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            
            <td>cont3</td>
            <td>cont4</td>
            
          </tr>
          <tr>
            
            <td>cont3</td>
            <td>cont4</td>
            
          </tr>
          <tr>
            
            <td>cont3</td>
            <td>cont4</td>
            
          </tr>
          <tr>
            
            <td>cont3</td>
            <td>cont4</td>
            
          </tr>
          <tr>
            
            <td>cont3</td>
            <td>cont4</td>
            
          </tr>
          <tr>
            
            <td>cont3</td>
            <td>cont4</td>
            
          </tr>
        </tbody>
      </table>
    </div>
    <div class="d d3" id="d3">
      <table>
        <thead>
          <tr>
            <th>Heading5</th>
            <th>Heading6</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            
            <td>cont5</td>
            <td>cont6</td>
          </tr>
          <tr>
           
            <td>cont5</td>
            <td>cont6</td>
          </tr>
          <tr>
            
            <td>cont5</td>
            <td>cont6</td>
          </tr>
          <tr>
           
            <td>cont5</td>
            <td>cont6</td>
          </tr>
          <tr>
            
            <td>cont5</td>
            <td>cont6</td>
          </tr>
          <tr>
            
            <td>cont5</td>
            <td>cont6</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="d d4">
      <table>
        <thead>
          <tr>
            <th>Heading7</th>
            <th>Heading8</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
          <tr>
            <td>cont1</td>
            <td>cont2</td>
            
          </tr>
        </tbody>
      </table>
    </div>
    
    </div>
</div>

我的原始要求http://jsfiddle.net/f7ht9gow/9/。但是，我无法停止horizontal scrollbar div垂直移动。因此，我尝试使用一些文章使用纯js来进行此操作，尽管Horizontal scrolling出了点问题，并且没有停止。有谁能够帮助我？这是垂直和水平滚动条的fiddle。

谢谢大家！

Answer 1

我检查了您分享的小提琴，如果我对您的理解正确，那么您希望在中间使用horizontal scroll 只需更改您的CSS代码overflow-x:scroll;

的这一部分

像这样

.d3{
  position:absolute;
  width : 100px;
  height : 100px;
  left : 290px;
  overflow-x:scroll;
  overflow-y:none;
}