【小程序】内容滚动方案,视频或者照片上方不随滚动而滚动

news2024/9/24 1:19:46

💭💭

✨:内容滚动方案,视频或者照片上方不随滚动而滚动

💟:东非不开森的主页

💜: 优于别人,并不高贵,真正的高贵应该是优于过去的自己。——海明威💜💜

🌸: 如有错误或不足之处,希望可以指正,非常感谢😉

两种方法

    • 方案1
    • 方法二(推荐)

请添加图片描述

方案1

⭐⭐⭐
说明
video这个盒子为为我们想要固定的内容
content为下方我们想要滚动的内容

  • 给我们我们要固定的视频或者图片用fixed固定一下
  • 在用一个盒子把下方我们想要滚动的内容包起来,用margin设一下距离(不然下面内容就会脱标到上面的)

在这里插入图片描述

方法二(推荐)

⭐⭐⭐⭐⭐

  • 给下方我们要选择滚动的内容用scroll-view (可滚动视图区域)所包裹起来)
  • 再给它加上属性scroll-y 纵向滚动
  • 因为使用scroll-view的scroll-y使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height
  • 所以我们给它设置高度
  • 而这个高度是相对于父盒子而言的
  • 所以给page这个页面设一个100vh的视高
  • 那么100%就是相对于page二言的

具体如下
在这里插入图片描述

在这里插入图片描述


✨✨✨✨
效果如下
请添加图片描述

补充:
scroll-view(具体的官方更多)
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/79141.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【图像去噪】基于自适应滤波器消除椒盐噪声图像附matlab代码

✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。 🍎个人主页:Matlab科研工作室 🍊个人信条:格物致知。 更多Matlab仿真内容点击👇 智能优化算法 …

web前端课程设计(HTML和CSS实现餐饮美食文化网站)静态HTML网页制作

👨‍🎓静态网站的编写主要是用HTML DIVCSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的…

论文笔记-时序预测-Informer

论文标题: Informer: Beyond Efficient Transformer for Long Sequence Time-Series Forecasting 论文链接: https://arxiv.org/abs/2012.07436 源码链接: https://github.com/zhouhaoyi/ETDataset 摘要 许多实际应用都需要对长序列时间序列…

游戏开发55课 性能优化12

4.9 带宽优化 带宽优化的目的是减少CPU与GPU之间的数据传输。 4.9.1 LOD(Level Of Detail) LOD即细节层次,根据物体在画面的大小选用不同级别的资源,以减少渲染和带宽的消耗。LOD在图形渲染中应用广泛,适用的对象有…

au cs6七线阁教程 笔记

01 驱动 asio 02 I 监听 R录音 一般是单声道 03 调整音量声相 04 导出 删除轨道文件 07 删除选区 自定义波形剪辑颜色 录音激活后,监听才能激活 08 自动控制 默认控制音量: 09 效果器: Vst3 dll 插件 独立效果器面板,实时&a…

[附源码]Python计算机毕业设计SSM基于框架预约挂号系统(程序+LW)

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

【leetcode】对称二叉树

一、题目描述 给你一个二叉树的根节点 root , 检查它是否轴对称。 输入:root [1,2,2,3,4,4,3] 输出:true 示例 2: 输入:root [1,2,2,null,3,null,3] 输出:false 二、代码思路 详细题解地址 思路有…

初识Dockerfile

初识Dockerfile Dockerfile 就是用来构建 docker 镜像的构建文件,命令脚本! # 创建一个dockerfile文件,建议 Dockerfile # 文件中的内容 指令(大写)FROM centosVOLUME ["volume01","volume02"]CMD echo "-------e…

【总复习】操作系统

操作系统总复习第1章 操作系统引论第2章 进程的描述与控制第3章 处理机调度与死锁第4章 进程同步第5章 存储器管理第6章 虚拟存储器第7章 输入/输出系统第1章 操作系统引论 1、操作系统的概念(定义) 操作系统( Operating System,…

力扣(LeetCode)1691. 堆叠长方体的最大高度(C++)

动态规划 状态计算 : f[i]{cuboids[i][2]if 不存在kmax(f[k])cuboids[i][2]if k∈[1,i−1]f[i] \begin{cases} cuboids[i][2] &\text{if } 不存在k \\ max(f[k])cuboids[i][2] &\text{if } k \in [1,i-1] \end{cases}f[i]{cuboids[i][2]max(f[k])cuboids[i][2]​if 不…

I-02Python自带编辑器IDLE的使用教程

目录 前言 正文 1. 开启行号功能 2. 运行代码,自动保存 3. 放大字体 4. 附常用快捷键 前言 IDLE是在安装python的时候自带的一个编辑器。 拥有基本的python编程的环境, 常用功能点: 代码自动补齐Debug模式python文档 你肯定想说&…

论文笔记-时序预测-Pyraformer

论文标题: Pyraformer: Low-Complexity Pyramidal Attention for Long-Range Time Series Modeling and Forecasting 论文链接: https://openreview.net/pdf?id0EXmFzUn5I 源码链接: https://github.com/alipay/Pyraformer 摘要 根据过去的…

(6)Pytorch常用函数

Pytorch用到的函数 文章目录Pytorch用到的函数1、tensor.eq()和tensor.lt()2、3、torch.pow()4、torch.clamp()5、item()和tolist()说明 1、发现了官方说明文档,使用这一套是最好的! 2、in-place操作说明,这是一个要被抛弃的方法,…

ArcGIS基础:获取栅格数据边界的线要素和独立格网面

本操作是为了提取栅格DEM数据的边界数据: 看一下原始数据:是一个非常普通的DEM栅格数据。 【方法:1】:使用【栅格范围】工具,通过搜索工具进行查找,如下所示: 该工具可以直接提取栅格外边界数…

将Bean交给Spring容器管理有几种方式?

将Bean交给Spring容器管理有几种方式? Spring核心 Spring核心是 IOC 和 AOP 。 所谓IoC,对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系。 至于更详细的说明,或者去深入理解Spring这两大核心&#x…

手写Spring4(Spring属性填充)

文章目录目标设计思路项目结构一、实现1、定义属性2、定义属性集合包装类3、类引用(bean类型)4、Bean定义补全5、Bean 属性填充二、测试1、准备2、测试案例3、测试结果目标 这一章节目的是接着前面的实例化策略实现后,进行属性填充&#xff…

MybatisPlus概述及使用

文章目录MybatisPlus1、介绍1.1、概述1.2、特性1.3、 支持数据库1.4、框架结构2、起步依赖与核心接口2.1 起步依赖2.2 BaseMapper3、快速入门3.1、导入依赖3.2、SpringBoot配置文件3.3、实体类3.4、Mapper接口3.5、引导类增加MapperScan注解3.6 测试4、注解4.1 TableName4.2 Ta…

《从总账到总监》读书笔记

书本封面 内容简介 这是一本用小说体例写作的财务专业书籍。工作中如何将财物数据业务化,找到绩效管理的关键点?在人工智能都会写诗的时代,财务这门学科是否会毫无价值?以及在未来,财务人员应该具备哪些专项能力才能不…

Java#34(多线程)

目录 线程(thread): 是一个程序内部的一条执行路经(之前写的代码中,main方法的执行就是一条单独的执行路径) 单线程: 一个程序只有一条执行路线 多线程: 指从软硬件上实现多条执行流程的技术 一.创建多线程 1.继承Thread类 2.实现Runnable接口 3.利用Callable, FutureT…

8 标志寄存器

标志寄存器 CPU 内部的寄存器中,有一种特殊的寄存器(对于不同的处理机,个数和结构都可能不同)具有以下3 种作用。 用来存储相关指令的某些执行结果;用来为CPU 执行相关指令提供行为依据:用来控制CPU 的相…