水平滚动条控制

如果您是指它有两个div的父DIV中的小提琴，当家长的div溢出以显示垂直滚动条，右侧内部div的水平滚动条进入垂直溢出内部，并且水平滚动条不可供人使用。

即使数据较多，我们如何才能实现内部div的水平滚动条被访问;在我看来像浮动或创建滚动条的副本之外的父div？

任何想法??

代码：

<div class="parent"> 
    <div id="left-order-panel"> 
     <table id="edit-left"> 
      <thead> 
       <tr> 
       <th>h1</th> 
       <th>h2</th> 
       <th>h3</th> 
       <th>h4</th> 
       <th>h5</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td>h1</td> 
       <td>h2</td> 
       <td>h3</td> 
       <td>h4</td> 
       <td>h5</td> 
       </tr> 
      </tbody> 
     </table> 

     <table id="data-left"> 
      <thead> 
       <tr> 
       <th>h1</th> 
       <th>h2</th> 
       <th>h3</th> 
       <th>h4</th> 
       <th>h5</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr>v1</tr> 
       <tr>v2</tr> 
       <tr>V3</tr> 
       <tr>v4</tr> 
       <tr>V5</tr> 
      </tbody> 
     </table> 
    </div> 
    <div id="right-order-panel"> 
     <div id="right-order-inner"> 
     <table id="order-right"> 
      <thead> 
       <tr style="height: 26px;"> 
        <th data-lang="dashboard.order-projection" colspan="10">Order Projection</th> 
       </tr> 
       <tr style="height: 26px;"> 
        <th colspan="4"> 2013 </th> 
        <th colspan="4"> 2014 </th> 
       </tr> 

      </thead> 
      <tbody> 
       <tr style="height: 26px;"> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
         <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>4</td> 
        <td>4</td> 
       </tr> 
       <tr style="height: 26px;"> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
         <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>4</td> 
        <td>4</td> 
       </tr> 
       <tr style="height: 26px;"> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>4</td> 
        <td>4</td> 
       </tr> 
       <tr style="height: 26px;"> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>4</td> 
        <td>4</td> 
       </tr> 

      </tbody> 
     </table> 

     </div> 
    </div>

来源

2013-08-28 GOK

将您的代码发布到jsfiddle中，它对分析非常有帮助。 –

我可以尝试，它是应用程序视图中的一个大概念代码。让我试试一些蓝色打印方式... @Sharath通过上面的语句清楚了吗？ – GOK

用代码和正确解释编辑我的问题。 – GOK

你可以做一些JQuery的做到这一点。

就包括图书馆：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

见的jsfiddle：http://jsfiddle.net/V4T4V/

使用滚动功能时wrapper1被滚动，你可以检测到，然后移动wrapper2。

$(function(){ 
    $(".wrapper1").scroll(function(){ 
     $(".wrapper2") 
      .scrollLeft($(".wrapper1").scrollLeft()); 
    }); 
    $(".wrapper2").scroll(function(){ 
     $(".wrapper1") 
      .scrollLeft($(".wrapper2").scrollLeft()); 
    }); 
});

然后，您可以将这个酒吧的股利外，在顶部等您想要的滚动条（注意包装的CSS必须是相同的宽度）

只要把此：

<div class="wrapper1"> 
    <div class="div1"> 
    </div> 
</div>

然后，你可以继续浮动在你父母的div里面的一些css定位的滚轮。

来源

2013-08-28 11:15:26

请参考小提琴，我可能不清楚我的场景 – GOK

http://jsfiddle.net/m8pDd/ – GOK

感谢兄弟的解决方案..为我工作...：D – GOK

像这样的工作：

HTML

<div class="outer"> 
    <div class="inner"> 
    <p>some text..</p> 
    </div> 
</div>

CSS

.outer { 
    height: 100px; width: 100px; 
    overflow: auto; 
} 
.inner { 
    width: 200px; height: 100px; 
} 
p { 
    border: 1px solid black; 
    width: 200px; 
    padding: 5px; 
}

基本上我已经添加了一个inner容器指定height和width。现在overflow出现在outer容器上，您可以相应地放置条形图。

Example fiddle

来源

2013-08-28 11:30:16 Xareyo

http://jsfiddle.net/m8pDd/ – GOK

水平滚动条控制

回答

相关问题