javascript – 从外部div滚动div

2019年8月4日 151次阅读

查看下面的小html结构示例以获取上下文.查看此
fiddle以及问题的示例.

小提琴用户的简短说明：

>向左滚动 – 垂直滚动条不可见
>向右滚动 – 垂直可见
>我希望垂直滚动条始终可见
>要求 – 标题必须保持固定(滚动时可见)

很长的解释：

我有一个带固定标题和可滚动主体的表.复杂性需要两个表.这一切都很好.在我的事业中,我也有可调整大小的列. table-layout：为了工作而修复.这是出现问题.

为了使滚动体工作,我有一个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>

旁注：如果你将表格显示设置为阻止,那么除非你想支持IE8,否则不需要包装div.也许有一种方法,但另一个问题是另一个问题.

最佳答案 经过几个小时的黑客攻击,没有运气,我决定将现有的一些库分开,看看他们是如何实现这一目标的.不幸的是,我非常失望.他们都使用javascript.

这方面的好处是它只需要一小部分代码而不是那意味着它会表现良好.为了使其尽可能好地执行,我在x方向需要时更新标题.因为在我的情况下这通常是一个小区域,它应该足够好.

魅力百倍！

fiddle

这是基本的：

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;
}

点赞