首页猿问 CSS：在x轴上固定的位置，但不是y？

CSS：在x轴上固定的位置，但不是y？

Html/CSS

万千封印 2019-12-26 10:07:03

有没有办法只在x轴上固定位置？因此，当用户向上滚动时，div标签会随之向上滚动，但不会并排滚动吗？

查看完整描述

3 回答

吃鸡游戏

TA贡献1829条经验获得超7个赞

它也是使用脚本的一种简单技术。您也可以在此处查看演示。

jQuery查询

$(window).scroll(function(){

$('#header').css({

'left': $(this).scrollLeft() + 15

//Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left

});

的CSS

#header {

top: 15px;

left: 15px;

position: absolute;

}

更新信用：@ PierredeLESPINAY

如前所述，要使脚本支持css中的更改，而不必在脚本中重新编码。您可以使用以下内容。

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first

$(window).scroll(function(){

$('#header').css({

'left': $(this).scrollLeft() + leftOffset //Use it later

});

反对回复 2019-12-26

慕勒3428872

TA贡献1848条经验获得超6个赞

现在，移动设备已占互联网市场的70％以上，您可以创建智能且响应迅速的产品。

您可以仅使用CSS来非常轻松地创建此容器，对一个容器使用overflow-x：scroll，对另一个容器使用overflow-y：scroll。您可以轻松地将容器元素的宽度：100vw和高度：100vh定位。

在示例上单击鼠标中键以对其进行测试。在移动设备上效果最佳，因为您看不到滚动条。

body{max-width:100%}

*{box-sizing:border-box;}

.container{background:#ddd;overflow-y:scroll;width:500px;max-height:100vh;}

.header{background: pink;}

.body{background: teal;padding:20px;min-width: 100%;overflow:scroll;overflow-y:hidden;min-height:300px;}

.body >div{min-width:800px;}

<body>

Button 1 > Button 2 > Button 3

</div>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

</div>

</body>

反对回复 2019-12-26

3 回答
0 关注
657 浏览

关注

CSS：在x轴上固定的位置，但不是y？

CSS：在x轴上固定的位置，但不是y？

3 回答

相关问题推荐

添加回答

热搜

最近搜索清空

CSS：在x轴上固定的位置，但不是y？

CSS：在x轴上固定的位置，但不是y？

3 回答

相关问题推荐

添加回答