<template> <el-container> <div class="zhl-scroll-sider" :style="{height:scrollH+'px'}"> <side-bar :upperData="isCollapse"></side-bar> </div> <el-container> <el-header> <v-header> <i class="iconfont icon-navigate sideBar-icon" @click="showSideBar"></i> </v-header> </el-header> <el-main id="zhl_scroll" class="pb20 zhl-scroll-container" :style="{height:scrollH-62+'px'}"> <transition name="move" mode="out-in"> <router-view/> </transition> </el-main> <!-- <el-footer> <p>Copyright © 2018 安云科技 <a href="http://www.liangaq.com/" target="_blank">量安全</a></p> </el-footer> --> </el-container> </el-container> </template> <script> import SideBar from "../common/SideBar"; import VHeader from "../common/Header"; export default { data() { return { isCollapse: false, clientH: "", scrollH: "", loading: "" }; }, created() { // 获取当前窗口的高度 this.clientH = document.documentElement.clientHeight + "px"; this.scrollH = document.documentElement.clientHeight; // this.clientH = (document.documentElement.clientHeight-1) + "px"; this.changeSideBar(); // 检测窗口变化改变侧边栏状态 let that = this; window.onresize = function () { that.clientH = document.documentElement.clientHeight + "px"; that.scrollH = document.documentElement.clientHeight; // that.clientH = (document.documentElement.clientHeight-1) + "px"; that.changeSideBar(); }; }, methods: { // 缩小/还原侧边栏 showSideBar() { this.isCollapse = !this.isCollapse; }, // 判断窗口宽度改变侧边栏状态 changeSideBar() { let clientW = document.documentElement.clientWidth; if (clientW < 1270) { this.isCollapse = true; } else { this.isCollapse = false; } } }, components: { SideBar, VHeader } }; </script> <style lang="less"> @import (reference) "../../assets/style/compatibility"; .zhl-scroll-container { .flex-def; .flex-h; .flex(1); /*-ms-flex-preferred-size: auto;*/ flex-basis: auto; } .zhl-scroll-sider { background-color: #001529; overflow-y: auto; overflow-x: hidden; width: 240px; .sideBar:not(.el-menu--collapse) { width: 260px; } /* !*隐藏滚动条,当IE下溢出,仍然可以滚动*! -ms-overflow-style:none;*/ /*火狐下隐藏滚动条*/ /*overflow:-moz-scrollbars-none;*/ /*overflow: hidden;*/ &>ul{ overflow-y: auto; } /*&::-webkit-scrollbar { display: none; }*/ .flex-def; .flex-v; } </style>
滚动条的隐藏
最新推荐文章于 2023-06-13 11:20:46 发布