【css拾遗】粘性布局实现有滚动条的情况下，按钮固定在页面底部展示

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

效果
滚动条滚动过程中按钮的位置位于手机的底部
在这里插入图片描述
滚动条滚到底部时按钮的位置正常

这个position:sticky真的好用我原先的想法是利用滚动条滚动事件去控制没想到css就可以解决

<template>
  <view class="container">
    <!-- 页面内容 -->
    <!-- ... -->

    <!-- 底部按钮 -->
    <view class="footer-button">
      <button @click="handleButtonClick">按钮</button>
    </view>
  </view>
</template>

<style>
.container {
  position: relative;
  height: 100vh; /* 设置容器高度为屏幕高度 */
  overflow-y: scroll; /* 允许内容溢出并显示滚动条 */
}

.footer-button {
  position: sticky;
  bottom: 0; /* 将容器固定在底部 */
  z-index: 9999; /* 设置 z-index 提高按钮的层级 */
  padding: 10px; /* 设置适当的内边距 */
}
</style>