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

╰+攻爆jí腚メ 2022-11-27 06:29 151阅读 0赞

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

![在这里插入图片描述][20200904161942461.gif_pic_center]

实现原理：分为两个部分：需要滑动的区域部分（命名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属性（是否要去展示一个标签）：它是直接从页面中删除或者添加某个元素

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <style>
            #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: scroll;
            }
            .inter { 
                height: 950px;
                width: 100%;
            }
            .content-box{ 
                margin-left:10px;
            }
            .question-type-box{ 
                margin-top:20px;
            }
            .answer{ 
                margin-top:10px;
            }
            .question-type{ 
                padding:3px;
                width:15px;
                height:15px;
                background-color:greenyellow;
                border-radius:10px;
            }
        </style>
    </head>
    
    <body>
        <div id="wrapper">
            <div class="fixed">前端小测试(共{ { questionList.length}}题)</div>
            
            <div class="outer">
                
                <div class="inter">
                    
                    <div class="content-box" v-for="(item,index) in questionList"> 
                        <div class="question-type-box">
                            
                            <span class="question-type" v-if="item.type == 1">单选</span>
                            <span class="question-type" v-if="item.type == 2" :id="'to_'+(index + 1)">多选</span>
                            { { index + 1}}.{ { item.content}}
                        </div>
                        
                        <div class="answers-box">
                            <div v-if="item.type == 1" class="answer"  v-for="(value,key) in item.answers[0]">    
                               <input :name="'radio'+index" :id="'radio'+key+index" type="radio"/><label :for="'radio'+key+index">{ { key}}.{ { value}}</label>                    
                            </div>
                            <div v-if="item.type == 2" class="answer"  v-for="(value,key) in item.answers[0]">    
                                <input :id="'check'+key+index" type="checkbox"/><label :for="'check'+key+index">{ { key}}.{ { value}}</label>                    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
           new Vue({ 
               el:"#wrapper",
               data () { 
                   return { 
                    // 模拟后端数据
                       questionList:[{ 
        "id": 1,
        "type": 2,
        "right_answers": ["B", "C"],
        "answers": [{ 
            "A": "VueJs",
            "B": "AngularJs",
            "C": "npm",
            "D": "ReactJs",
            "E":"gulp",
            "F":"foundation",
            "G":"bootstrap"
        }],
        "content": "前端框架有哪些",
    },
    { 
        "id": 2,
        "type": 1,
        "right_answers": ["B","C"],
        "answers": [{ 
            "A": "static",
            "B": "absolute",
            "C": "relative",
            "D":"sticky",
            "E":"center",
            "F":"fixed",
            "G":"inherit"
        }],
        "content": "position的属性值不包括下面哪个？",
    }]
                   }
               }
           })
        </script>
    </body>
    
    </html>

[20200904161942461.gif_pic_center]: /images/20221124/0da0b870cab143ec9fe8f6ac2bdfc4c7.png