当前位置: 首页 > news >正文

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

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

这个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>

http://www.lryc.cn/news/195350.html

相关文章:

  • git 创建并配置 GitHub 连接密钥
  • 使用Premiere、PhotoShop和Audition做视频特效
  • vueday01——动态参数
  • 双向链表C语言版本
  • visual studio安装时候修改共享组件、工具和SDK路径方法
  • Motorola IPMC761 使用边缘TPU加速神经网络
  • EM@直线的参数方程
  • day08-注册功能、前端登录注册页面复制、前端登录功能、前端注册功能
  • rust: function
  • 零代码编程:用ChatGPT批量下载谷歌podcast上的播客音频
  • nginx.4——正向代理和反向代理(七层代理和四层代理)
  • 基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(三)
  • Spring-事务源码解析2
  • 基于ssm008医院门诊挂号系统+jsp【附PPT|开题|任务书|万字文档(LW)和搭建文档】
  • 【Linux常用命令11】Linux文件与权限详解
  • BAT026:删除当前目录指定文件夹以外的文件夹
  • Python浏览器自动化
  • 基于tornado BELLE 搭建本地的web 服务
  • 信息系统漏洞与风险管理制度
  • Hadoop3教程(十七):MapReduce之ReduceJoin案例分析
  • BAT026:删除当前目录及子目录下的空文件夹
  • nodejs+vue网课学习平台
  • Can Language Models Make Fun? A Case Study in Chinese Comical Crosstalk
  • 阿里云云服务器实例使用教学
  • promisify 是 Node.js 标准库 util 模块中的一个函数
  • ArcGIS在VUE框架中的构建思想
  • 【Overload游戏引擎细节分析】视图投影矩阵计算与摄像机
  • 什么是云原生?零基础学云原生难吗?
  • Ubuntu18.04下载安装基于使用QT的pcl1.13+vtk8.2,以及卸载
  • 7 使用Docker容器管理的tomcat容器中的项目连接mysql数据库