Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

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

滚动 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>

image

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

position: sticky;
left: 0;

}

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...