滚动 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>
有没有优雅的办法可以实现?
###<span>
String-String
</span>
span {
position: sticky;
left: 0;
}
用sticky定位,不知道是不是楼主想要的
###大概就是这样
<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;
}