猿问

CSS:在x轴上固定的位置,但不是y?

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



万千封印
浏览 693回答 3
3回答

吃鸡游戏

它也是使用脚本的一种简单技术。您也可以在此处查看演示。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    });});

慕勒3428872

现在,移动设备已占互联网市场的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>&nbsp; <div class="container">&nbsp; &nbsp; <div class="header">&nbsp; &nbsp; &nbsp; &nbsp;Button 1 > Button 2 > Button 3&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="body">&nbsp; &nbsp; &nbsp; <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<br><br>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<br><br>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<br><br>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<br><br>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<br><br>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<br><br>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<br><br>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&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; </div>&nbsp; </div></body>
随时随地看视频慕课网APP
我要回答