滚动外层的窄div，如何能让内层的宽div中的文本，尽可能一直显示在屏幕内？

Question

滚动 div#container 时，如果 div.item 在视野内，如果保证 String-String 一直在视野内？

https://codepen.io/homor/pen/BaLPoQb

代码如下：

<div id="container">
    <div class="stage">
        <div class="item">
            String-String
        </div>
    </div>
</div>

<style>
#container{
    width: 300px;
    height: 80px;
    overflow: scroll;
}

.stage{
    width: 1000px;
    position: relative;
}

.item{
    position: absolute;
    left: 100px;
    right: 200px;
    width: 400px;
    text-align: center;
    background-color: yellow;
}
</style>

有没有优雅的办法可以实现？

Answer 1

<span>
String-String
</span>
span {

position: sticky;
left: 0;

}

用sticky定位，不知道是不是楼主想要的

Answer 2

大概就是这样

<div class="container">
    <div class="relative">
        <div class="scroll-content">
            <div class="scroll">
                <div class="absolute">11111111</div>
            </div>
        </div>
    </div>
</div>

.container{
    width: 100vw;
    height: 100vh;
}
.relative{
    position: relative;
    width: 100%;
    height: 100%;
}
.scroll-content{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.scroll{
    width: 200%;
    height: 100%
}
.absolute{
    width: 100px;
    background: yellow;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}