如何解决CSS 滚动对齐对齐无法缩放滚动元素保持其位置
我正在尝试实现一个“可缩放”的画廊。我希望其中一个项目的宽度在用户将其悬停时增加但保持其在窗口上的位置固定。
我一直在使用 CSS 滚动捕捉属性,它似乎在 Chrome 和 Safari 中表现良好。但是在 Firefox 中,当一个项目被缩放时,它会忽略 scroll-snap-align 位置。
有谁知道是否有任何特定于 Firefox 的属性或 polyfill 可以轻松处理此问题?还是我必须将 snap 方法更改为基于 JS 的方法?
这是一个例子: (尝试悬停其中一个 div,在 Chrome 中它应该保持居中,在 Firefox 中它移到一边)
#container{
position: absolute;
display:flex;
align-content: baseline;
width: 90vw;
height:90vh;
background-color: #ddd;
overflow-x:auto;
scroll-snap-type: x mandatory;
}
.scrollEl{
flex: 0 0 auto;
width:100px;
height:100px;;
margin:20px;
background-color:#777;
scroll-snap-align: center;
}
.scrollEl:hover {
width:200px;
}
<div id="container">
<div class="scrollEl">
1
</div>
<div class="scrollEl">
2
</div>
<div class="scrollEl">
3
</div>
<div class="scrollEl">
4
</div>
<div class="scrollEl">
5
</div>
<div class="scrollEl">
6
</div>
<div class="scrollEl">
7
</div>
<div class="scrollEl">
8
</div>
<div class="scrollEl">
9
</div>
<div class="scrollEl">
10
</div>
<div class="scrollEl">
11
</div>
<div class="scrollEl">
12
</div>
<div class="scrollEl">
13
</div>
</div>
Here is a JSFiddle of the same thing
Chrome 中的悬停打印:
在 Chrome 1 中悬停
在 Chrome 2 中悬停
Firefox 中的悬停打印:
在 Firefox 1 中悬停
在 Firefox 2 中悬停
非常感谢!
PS:我什至不想知道其他浏览器发生了什么
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。