水平滚动与粘滞的div，留在左边框 [英] Horizontal scrolling with sticky div that stays on the left border

问题描述

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

查看我已经有的示例：

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

这是我当前的HTML：

  < div class =main> 
< div class =row> 
< div class =sticky>粘性标题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>粘性标题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>粘性标题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>粘性标题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>粘性标题E< / div> 
< div class =content> ContentE< / div> 
< div class =content> ContentE< / div> 
< div class =content> ContentE< / div> 
< div class =content> ContentE< / div> 
< / div> 
< / div> 
  

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

现在红色标题与内容一起滚动，现在是，但是与内容（MS Excel样式）垂直滚动。

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

UPDATE ：重要的是，红色标题与相应的内容一起垂直滚动，但在水平滚动时会贴到左边。

解决方案

我不认为有可能通过纯CSS实现你的目标粘贴的项目通常使用 position：fixed 这不幸地修复它们相对于视口。

使用javascript（在这种情况下是jquery库）和绝对定位，你应该能够实现您的目标：

 
 code> .row {
 height：50px; 
 overflow：scroll; 
 clear：both; 
 width：1000px; 
 position：relative; // for the absolute positioning of sticky 
 background-color：yellow; 
 padding-left：150px; //这是你的粘性列的大小，所以它不会覆盖内容，当完全左
 box-sizing：border-box; //这是所以填充不会添加额外的宽度你的1000px 
} 
 
。sticky {
 background-color：red; 
 position：absolute; left：0; top：0; 
} 
  

javascript： b

  $（'。main'）。scroll（function（）{
 $（this）.find（'。sticky'）。css 'left'，$（this）.scrollLeft（））; 
}）; 
  

http： //jsfiddle.net/j9C8R/36/

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/

This is my current 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:

.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).

How can this be achieved (preferably with only 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.

解决方案

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

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

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:

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

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

这篇关于水平滚动与粘滞的div，留在左边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！