从外部div滚动div [英] Scrolling a div from an outer div

问题描述

查看下面的小html结构示例以了解上下文。请查看此小提示的问题和示例。

小提琴使用者的简短说明：

1. 向左滚动 - 不显示垂直滚动条




3. 需要 - 标题必须保持固定（滚动时可见）
li>

详细解释：

我有一个包含固定标题和可滚动身体。其复杂性需要两个表。这一切都很好。在我的事业，我也有可调整大小的列。 table-layout：fixed 让它工作。这是出现的问题。

为了使滚动体工作，我有一个div，它包装了 .rows 表用于滚动。这个工作很好，直到网格，特别是 .rows 表，在x方向溢出。在这种情况下，垂直滚动条仅在网格向右滚动时才可见。因为滚动条在 .row-wrapper div上。该溢出被 .grid div隐藏。我想滚动条位于 .grid-canvas div上，这样即使滚动到左侧，它也是可见的。

 < div class = grid> 
< div class = grid-canvas> 
< table class = header>< / table> 
< div class = row-wrapper> 
< table class = rows>< / table> 
< / div> 
< / div> 
< / div> 
  

注意：如果将表格显示设置为block，则不需要包装div，除非想支持IE8我做的。

解决方案

经过几个小时的黑客没有运气，我决定讨论一些现有的图书馆，看看他们是如何实现这一点的。不幸的是，我非常失望。所有人都使用的是javascript。

这方面的一面是，它只需要一小段代码，不意味着它将表现良好。为了使这种表现尽可能好，我需要在x方向更新标题。因为这通常是一个小区域在我的情况下，应该是足够好。

百分之一的魅力！

fiddle

以下是基本信息：

/ p>

 < div class = grid> 
< div class = grid-canvas> 
< div class = header-wrapper> 
< table class = header>< / table> 
< / div> 
< div class = row-wrapper> 
< table class = rows>< / table> 
< / div> 
< / div> 
< / div> 
   
 
 
 
 Javascript 
  $ headerDiv = $（'。header-wrapper'）; 
 $ rowDiv = $（'。row-wrapper'）; 
 $ rowDiv.scroll（function（e）{
 $ headerDiv.css（{
 left： -  $ rowDiv [0] .scrollLeft +'px'
}）; 
}）; 
  
 CSS 
  .grid {
 height：500px; 
 width：350px; 
} 
 
 .grid-canvas {
 position：relative; 
 width：100％; 
 height：100％; 
 overflow：hidden; 
} 
 
 .header-wrapper {
 position：absolute; 
 top：0; 
 width：auto; 
 background-color：white; 
 z-index：1; 
} 
 
 .row-wrapper {
 position：absolute; 
 top：0; 
 height：100％; 
 width：100％; 
 box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 overflow：auto; 
 padding-top：18px; 
 background-color：lightgreen; 
} 
 
 th，td {
 width：80px; 
 min-width：80px; 
 max-width：80px; 
 overflow：hidden; 
 text-overflow：ellipsis; 
 white-space：nowrap; 
} 
  
 
 
Check out the small html structure sample below for context. Check out this fiddle for and example of the problem.

Short explanation for fiddle users:

Scroll left - vertical scroll bar not visible
Scroll right - vertical visible
I want the vertical scroll bar always visible
Requirement - The header must remain fixed (visible while scrolling)
Long explanation:

I have a table with a fixed header and a scrollable body. The complexities of that requires two tables. That's all good. In my cause I also have resizable columns. table-layout: fixed for that to work. This is were problems arise. 

To make the scrolling body work I've got a div that wraps the .rows table for scrolling. This works great until the grid, specifically the .rows table, overflows in the x direction. In this case the the vertical scroll bar is only visible if the grid is scrolled all the way to the right. Because the scroll bar is on the .row-wrapper div. And that overflow is being hidden by the .grid div. I'd like the scrollbar to be on the .grid-canvas div so that it is visible even when scrolled to the left side.
<div class=grid>
    <div class=grid-canvas>
        <table class=header></table>
        <div class=row-wrapper>
            <table class=rows></table>
        </div>
    </div>
</div>
side note: If you set the table display to block then the wrapping div isn't needed unless you want to support IE8 which I do. Maybe there's a way around that but that another question for another time.
解决方案
Well after hours of hacking with no luck I decided to disect some of the existing libraries to see how they were accomplishing this. Unfortunately I was sorely disappointed. All of them were using javascript.

The up side to this is that the it only requires a small bit of code not that that means it will perform well. To make this perform as well as possible I'm updating the header when required in the x direction. Since this will typically be a small area in my case it should be good enough.  

Hundredth times a charm!

fiddle

Here's the basic:

HTML
<div class=grid>
    <div class=grid-canvas>
        <div class=header-wrapper>
            <table class=header></table>
        </div>
        <div class=row-wrapper>
          <table class=rows></table>
        </div>
    </div>
</div>
Javascript
$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
    $headerDiv.css({
        left: -$rowDiv[0].scrollLeft + 'px'
    });
});​
CSS
.grid {
  height: 500px;
  width: 350px;
}

.grid-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.header-wrapper {
  position: absolute;
  top: 0;
  width: auto;
  background-color: white;
  z-index: 1;
}

.row-wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: auto;
  padding-top: 18px;
  background-color: lightgreen;
}

th, td {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
​

                        
这篇关于从外部div滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！