css实现固定区域的上下滑动(vue基础实践案例)

2023-10-21 04:20| 来源: 网络整理| 查看: 265

css实现固定区域的上下滑动

在这里插入图片描述

实现原理：分为两个部分：需要滑动的区域部分（命名inter）和inter的父容器（命名outer）；让inter的高度超过outer,给outer设置 overflow-y: scroll属性分别添加css属性如下：

.outer { height: 450px; overflow-y: scroll; } .inter { height: 950px; width: 100%; }

就可以实现滑动了。

下面是vue的一个案列，里面包含的知识点有：

v-for循环（案例中直接循环一个json数组，将每道题展示出来）单选按钮和多选按钮：比如单选的时候如果不给单选框添加name属性，就还是多选，解决办法就是给同一道题下的单选按钮添加相同的name属性值。如果想实现点击选择按钮后面的文本时也可以进行选择，就要用到lable标签，将lable标签的for属性和选择按钮标签的id属性写上同样的值就可以了。 v-if属性（是否要去展示一个标签）：它是直接从页面中删除或者添加某个元素

完整的案列代码展示如下，可以直接复制过去看效果（很简单的一个单页面）：

Document #wrapper{ border: 1px solid black; background-color: antiquewhite; width:300px; } .fixed{ text-align:center; color:blue; margin:20px; background-color:darkgray; } .outer { height: 450px; overflow-y

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章