javascript 使用留在左边框上的粘性 div 进行水平滚动

Horizontal scrolling with sticky div that stays on the left border

提问by Besi

I have two rows of data (green) and a header (red), which should be visible at all times:

我有两行数据（绿色）和一个标题（红色），它们应该始终可见：

Check out the example I already have:

查看我已经拥有的示例：

http://jsfiddle.net/j9C8R/33/

http://jsfiddle.net/j9C8R/33/

This is my current HTML:

这是我当前的 HTML：

<div class="main">
    <div class="row">
        <div class="sticky">Sticky header A</div>
        <div class="content">ContentA</div>
        <div class="content">ContentA</div>
        <div class="content">ContentA</div>
        <div class="content">ContentA</div>
    </div>
    <div class="row">
        <div class="sticky">Sticky header B</div>
        <div class="content">ContentB</div>
        <div class="content">ContentB</div>
        <div class="content">ContentB</div>
        <div class="content">ContentB</div>
    </div>
    <div class="row">
        <div class="sticky">Sticky header C</div>
        <div class="content">ContentC</div>
        <div class="content">ContentC</div>
        <div class="content">ContentC</div>
        <div class="content">ContentC</div>
    </div>
    <div class="row">
        <div class="sticky">Sticky header D</div>
        <div class="content">ContentD</div>
        <div class="content">ContentD</div>
        <div class="content">ContentD</div>
        <div class="content">ContentD</div>
    </div>
    <div class="row">
        <div class="sticky">Sticky header E</div>
        <div class="content">ContentE</div>
        <div class="content">ContentE</div>
        <div class="content">ContentE</div>
        <div class="content">ContentE</div>
    </div>
</div>

And CSS:

和 CSS：

.main {
    background-color:blue;
    overflow:scroll;
    height:200px;
    width:400px;
}
.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    background-color:yellow;
}
.sticky, .content {
    float:left;
    width:150px;
    border:1px solid black;
}
.sticky {
    background-color:red;
}
.content {
    background-color:green;
}

Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).

现在红色标题与内容一起滚动，但它应该坚持现在的位置，但与内容垂直滚动（MS Excel 样式）。

How can this be achieved (preferably with only CSS).

如何实现（最好仅使用 CSS）。

UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.

更新：重要的是，红色标题与相应的内容一起垂直滚动，但在水平滚动时坚持左边缘。

回答by Pete

UPDATE

更新

please note the below is now a little out of date as we have css position sticky

请注意下面的内容现在有点过时了，因为我们有 css位置粘性

Original Post

原帖

I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixedwhich unfortunately fixes them relative to the viewport.

我认为通过纯 css 实现您的目标是不可能的，因为通常使用的粘性项目很position:fixed不幸地相对于视口修复了它们。

with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:

通过使用 javascript（在本例中为 jquery 库）和绝对定位，您应该能够实现您的目标：

new styles:

新款式：

.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    position:relative; //for the absolute positioning of sticky
    background-color:yellow;
    padding-left:150px; //this is the size of your sticky column so it doesn't cover content when fully left
    box-sizing:border-box;//this is so the padding doesn't add extra width to your 1000px
}

.sticky {
    background-color:red;
    position:absolute; left:0; top:0;
}

javascript:

javascript:

$('.main').scroll(function() {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

http://jsfiddle.net/j9C8R/36/

http://jsfiddle.net/j9C8R/36/

回答by Mr. Alien

Ok I've scrapped your thing and have made a complete new one, I've just not wrapped up things inside a position relative container but you can manage to do it atleast

好的，我已经报废了你的东西并做了一个全新的，我只是没有把东西包装在一个位置相关的容器中，但你至少可以设法做到

The things are easy for vertical scroll but if you expect horizontal scroll and move headers along, (CSS Wont Just Do It)

垂直滚动很容易，但如果您希望水平滚动并移动标题，（CSS 不会只是这样做）

Demo

演示

CSS

CSS

.head {
    background-color: #f00;
    width: 300px;
    position: absolute;
    left: 100px;
}

.head table {
    width: 100%;
}

.body {
    position: relative;
    left: 100px;
    top: 20px;
    width: 300px;
    height: 50px;
    overflow-y: auto;
}

.body table {
    width: 100%;
}

.body td {
    width: 100px;
}

.head table td {
    width: 100px;
}

.left {
    position: absolute;
    background-color: #0f0;
    width: 90px;
    top: 40px;
}