javascript - 我有一个要求，我应该为完整的表格提供垂直滚动条，但为中间列提供水平滚动条

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/ .但是，我无法阻止 horizo​​ntal scrollbar div 垂直移动。因此，尽管 Horizo​​ntal scrolling 出现问题并且它没有移动，但我尝试使用一些文章使用纯 js 来完成它。有谁能够帮助我？这是 fiddle用于垂直和水平滚动条。

比你们都好!

Answer 1

我检查了你分享的 fiddle ，如果我理解正确的话你想要一个 horizo​​ntal scroll 在中间只需更改这部分 CSS 代码 overflow-x:scroll;

像这样

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