为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

万千封印 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>

  <div class="container">

    <div class="header">

       Button 1 > Button 2 > Button 3

    </div>

    <div class="body">

      <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

     </div>

    </div>

  </div>

</body>


查看完整回答
反对 回复 2019-12-26
  • 3 回答
  • 0 关注
  • 692 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信