在使用overflow,属性值为auto或者scroll时,很多时候会有多余的滚动条在旁边,这时就非常影响观瞻,所以我们有时需要将滚动条隐藏掉。

今天就说两种我用到的隐藏滚动条的方法,如果有其他解决方案欢迎留言补充:

方法一:

.detailDialog /deep/ .el-dialog__body{
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
padding: 0 0.1rem;
margin-bottom: 0.2rem;
}
.detailDialog /deep/ .el-dialog__body::-webkit-scrollbar{
display: none;
}

如果只是想修改滚动条的样式,请阅读下文

vue中修改滚动条样式

此方法只适用于 google 浏览器,而在火狐浏览器中是不适用的,因为在火狐中滚动条是不可以自定义的, 所以我就使用了在盒子外面再套一层盒子并且添加overflow:hidden, 让内部盒子比外面盒子大一些, 这样就可以隐藏滚动条, 这个没有兼容问题,可以用在各个浏览器,一种变相的隐藏方法:

方法二:

HTML代码

 <div class="dialogBox"> //外层套一层 Box
<el-dialog class="detailDialog" :visible.sync="detailDialogVisible" title="弹窗">
<div class="inBox" v-html="goodsDetail"/>
</el-dialog>
</div>

css代码

    .detailDialog /deep/ .el-dialog {
// width: 100%;
overflow: hidden;
}
.dialogBox /deep/ .el-dialog__wrapper {
overflow: hidden !important;
}
.detailDialog /deep/ .el-dialog__body{
width: 102%;
padding-top: 0 !important;
overflow-y: auto !important;
height: 1040px;
}

如果只是需要修改一下滚动条的样式,请阅读下文

vue中修改滚动条样式

overflow 隐藏滚动条样式的更多相关文章

  1. sencha touch 隐藏滚动条样式的几种方式

    如图,当滚动条显示时不是那么的好看   可以通过以下几种方式来隐藏滚动条,而又不影响滚动效果 1.通过css隐藏 /* 隐藏x方向滚动条 */ .x-scroll-bar-x.active { wid ...

  2. vue中修改滚动条样式

    这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...

  3. CSS隐藏overflow默认滚动条同时保留滚动效果

    主要应用于移动端场景,仿移动端滚动效果.对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了. 所以对于移动端webkit内核提供一个伪类选择器: .element::-w ...

  4. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  5. overflow滚动条样式设置,ie和webkit内核

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  7. css 设置overflow:scroll 滚动条的样式

    /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1 ...

  8. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  9. CSS 控制滚动条样式

    /*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略.下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/ #s ...

随机推荐

  1. 论文阅读 TEMPORAL GRAPH NETWORKS FOR DEEP LEARNING ON DYNAMIC GRAPHS

    14 TEMPORAL GRAPH NETWORKS FOR DEEP LEARNING ON DYNAMIC GRAPHS link:https://scholar.google.com.hk/sc ...

  2. 【FAQ】接入HMS Core推送服务,服务端下发消息常见错误码原因分析及解决方法

    HMS Core推送服务支持开发者使用HTTPS协议接入Push服务端,可以从服务器发送下行消息给终端设备.这篇文章汇总了服务端下发消息最常见的6个错误码,并提供了原因分析和解决方法,有遇到类似问题的 ...

  3. ExceptionLess的安装、配置、使用

    前言 Exceptionless 是一个开源的实时的日志收集框架,它可以应用在基于 ASP.NET,ASP.NET Core,Web API,Web Forms,WPF,Console,ASP.NET ...

  4. Nginx搭建简易文件服务器

    Nginx搭建简易文件服务器 1.安装nginx,此处略过 2.修改nginx配置文件 详细如下 # 此处为部分文件是否有权限,使用root,则不会出现403权限问题 user root; worke ...

  5. flex 我所理解不够深刻的内容

    1.align-items属性   父元素 align-items属性定义项目在交叉轴上如何对齐. flex-start:交叉轴的起点对齐. flex-end:交叉轴的终点对齐. center:交叉轴 ...

  6. 使用flex弹性布局代替传统浮动布局来为微信小程序写自适应页面

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_109 我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + p ...

  7. 十分钟教会你如何使用VitePress搭建及部署个人博客站点

    使用VitePress可以让我们快速搭建一个静态博客网站,这篇文章将带领大家搭建一个基于VitePress的静态博客网站并且部署到GitHub Pages(github提供的静态网页服务) 快速上手 ...

  8. Dubbo源码(七) - 集群

    前言 本文基于Dubbo2.6.x版本,中文注释版源码已上传github:xiaoguyu/dubbo 集群(cluster)就是一组计算机,它们作为一个总体向用户提供一组网络资源.这些单个的计算机系 ...

  9. 刷题记录:Codeforces Round #739 (Div. 3)

    Codeforces Round #739 (Div. 3) 20210907.网址:https://codeforces.com/contest/1560. --(叹). A 不希望出现带" ...

  10. 【java】学习路径23-拆箱与装箱

    拿Integer类型和int类型来举例子. 装箱,基本给引用.下面的代码相当于Integer i_test = Integer.valueOf("100"); 注意!过程是自动的. ...