精华内容
下载资源
问答
  • uniapp scroll-view组件隐藏滚动条

    千次阅读 2020-10-26 20:42:50
    在用scroll-view的时候:用手机模拟器和小程序查看的时候并没有出现滚动条,真机运行的时候出现滚动条,用h5直接看的时候出现滚动条,我发现的解决办法有两种: 1.在app.vue的style里面外部链接base.css 这种办法...

    在用scroll-view的时候:用手机模拟器和小程序查看的时候并没有出现滚动条,真机运行的时候出现滚动条,用h5直接看的时候出现滚动条,我发现的解决办法有两种:

    1.在app.vue的style里面外部链接base.css 这种办法比较适配,控制所有滚动条

    <style>
        @import url("./base.css");
    </style>
    

    在base.css中

    ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
        color: transparent;
      }
    

    2.直接在app.vue里面用条件编译,可以根据不同平台控制不同标签的属性

    <style>
    @import url("./base.css");
    /* 解决小程序和app滚动条的问题 */
    /* #ifdef MP-WEIXIN || APP-PLUS */
    	::-webkit-scrollbar {
    	    display: none;
    	    width: 0 !important;
    	    height: 0 !important;
    	    -webkit-appearance: none;
    	    background: transparent;
    	    color: transparent;
    	  }
    /* #endif */
    
    /* 解决H5 的问题 */
    /* #ifdef H5 */
        uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
        	/* 隐藏滚动条,但依旧具备可以滚动的功能 */
    		display: none;
    	    width: 0 !important;
    	    height: 0 !important;
    	    -webkit-appearance: none;
    	    background: transparent;
    	    color: transparent;
        }
    /* #endif */
    </style>
    

    本文转载自:https://blog.csdn.net/miga1/article/details/107202779/

    展开全文
  • element的隐藏组件滚动条el-scrollbar使用 亲测有用~

    万次阅读 多人点赞 2019-04-25 17:27:00
    刚好项目里面一直在使用的都是element,因为原生的滚动条太丑了,发现elementui中有个隐藏的组件,优化滚动条样式。亲测可用,鼠标经过的时候才会显示,简单美观。 正文 首先全局引入element,import ElementUI from...

    前言

    刚好项目里面一直在使用的都是element,因为原生的滚动条太丑了,发现elementui中有个隐藏的组件,就是element官网使用的滚动条,可以优化滚动条样式。亲测可用,鼠标经过的时候才会显示,简单美观。
    在这里插入图片描述

    正文

    首先全局引入element,import ElementUI from 'element-ui';

    1. 简单使用–只是用竖的滚动条
      只是用竖的滚动条,外层box设置宽高,内层的内容充满,设置el-scrollbar的高度。
      重要代码.el-scrollbar__wrap { overflow: scroll; width: 110%; height: 120%; } ,为什么要设置这个宽和高呢?因为:为了把原生的滚动条挤到看不到地方!!这是很重要的。没有这个代码,竖滚动条显示正常,可横向会和原生的滚动条重合。
    <template>
        <div>
            <div class="box">
                <el-scrollbar>
                    <p>刚好项目里面一直在使用的都是element</p>
                    <p>因为原生的滚动条太丑了</p>
                    <p>发现elementui中有个隐藏的组件</p>
                    <p>优化滚动条样式</p>
                    <p>亲测可用</p>
                </el-scrollbar>
            </div>
        </div>
    </template>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background: aliceblue;
        }
    
        .el-scrollbar {
            height: 100%;
        }
        .el-scrollbar__wrap {
            overflow: scroll;
            width: 110%;
            height: 120%;
        }
    </style>
    
    1. 使用横向和竖向的滚动条
      让外层盒子的内容不换行white-space: nowrap;,其他代码相同。这个情况也适用与内部是ul,li,table等比较复杂的情况。
    <template>
        <div>
            <div class="box">
                <el-scrollbar>
                    <p>刚好项目里面一直在使用的都是element</p>
                    <p>因为原生的滚动条太丑了</p>
                    <p>发现elementui中有个隐藏的组件</p>
                    <p>优化滚动条样式</p>
                    <p>亲测可用</p>
                </el-scrollbar>
            </div>
        </div>
    </template>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background: aliceblue;
             white-space: nowrap;
        }
        .el-scrollbar {
            height: 100%;
        }
       .box  .el-scrollbar__wrap {
            overflow: scroll;
            width: 110%;
            height: 120%;
        }
    </style>
    

    3.谷歌浏览器直接改变原生滚动条样式
    这样不用其他插件,滚动条也能很好看,不考虑兼容的时候,可以全局设置成这种样式,然后细节处用el-scrollbar~~偷懒,
    在这里插入图片描述

    <style>
      ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
    
        ::-webkit-scrollbar-thumb {
            background-color: #eee;
            border-radius: 3px;
        }
      <style>
    

    小结

    还有很重要的一点,在vue框架下,样式.el-scrollbar__wrap要写到影响全局的style中,不要写到style scope中,不然会不起作用。
    如果怕和别的样式起冲突,可以加前缀.box .el-scrollbar__wrap{ overflow: scroll; width: 110%; height: 120%;}。宽高不是固定死的,根据自己的页面可以微调一下。
    .el-scrollbar 也可以写成行内样式。

    如果本文对你有帮助的话,请给我点赞打call哦~o( ̄▽ ̄)do
    有其他问题留言 over~

    展开全文
  • Vue中子组件的弹框滚动条不影响父元素滚动问题描述解决方法基于Jquery的方式原生JS:给body加上position:fixed==原生JS==:给body加上overflow:hidden 问题描述 在vue的某个页面的子组件中设置了弹框,主页面和弹窗...

    问题描述

    在vue的某个页面的子组件中设置了弹框,主页面和弹窗都有滚动条,当弹窗滚动条滑到底部时,会触发主页面的滑动。怎么禁止主页面的滑动?关闭弹窗后,再恢复主页面的滑动。

    解决方法

    基于Jquery的方式

    嫌繁琐,没有亲测,网上有很多方法
    举例 https://blog.csdn.net/Yiright/article/details/53944024

    原生JS:给body加上position:fixed

    问题: 这种方式在关闭弹窗后,会让主页面滑到顶部,后续还需要重新获取主页面的scrolltop,重新定位,比较麻烦

    原生JS:给body加上overflow:hidden

    原文:https://blog.csdn.net/yangjingjing9/article/details/82456554

    beforeCreate () {
      document.querySelector('body').setAttribute('style', 'overflow:hidden')
    },
    beforeDestroy () {
      document.querySelector('body').removeAttribute('style')
    }
    

    使用:这里的调用方式随自己的代码设计调用,不一定是这两个钩子函数
    优点: 开启和关闭弹窗时,主页面位置不会改变

    展开全文
  • elementui中有个隐藏的组件,就是element官网使用的滚动条,tree 左右滑动滚动条 ①首先全局引入element,import ElementUI from 'element-ui'; import ElementUI from 'element-ui' Vue.use(ElementUI) ...

    elementui中有个隐藏的组件,就是element官网使用的滚动条,tree 左右滑动滚动条

     

    ①首先全局引入element,import ElementUI from 'element-ui';

    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    ②页面代码如下
     1 <template>
     2   <div class="box">
     3     <el-scrollbar class="tree_scroll">
     4       <el-tree
     5         :data="data"
     6         show-checkbox
     7         class="tree_app"
     8         default-expand-all
     9         node-key="id"
    10         ref="tree"
    11         highlight-current
    12         :props="defaultProps"
    13       ></el-tree>
    14     </el-scrollbar>
    15   </div>
    16 </template>

    <script>
    export default {
      data() {
        return {
          data: [
            {
              id: 1,
              label: "一级 1",
              children: [
                {
                  id: 4,
                  label: "二级 1-1",
                  children: [
                    { id: 9, label: "三级 1-1-1adf答复哈的身份" },
                    { id: 10, label: "三级 1-1-2" },
                    { id: 11, label: "三级 1-1-3" }
                  ]
                }
              ]
            },
            {
              id: 2,
              label: "一级 2",
              children: [{ id: 5, label: "二级 2-1" }, { id: 6, label: "二级 2-2" }]
            },
            {
              id: 3,
              label: "一级 3",
              children: [{ id: 7, label: "二级 3-1" }, { id: 9, label: "二级 3-2" }]
            }
          ],
          defaultProps: {
            children: "children",
            label: "label"
          }
        };
      }
    };
    </script>

    ④样式

     1 .box {
     2   width: 200px;
     3   height: 200px;
     4   background: red;
     5   white-space: nowrap;
     6   margin: 200px;
     7 }
     8 .tree_app {
     9   height: 200px;
    10 }
    11 .el-tree-node>.el-tree-node__children{
    12   overflow:visible !important;
    13 }
    ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 3px;
    }

     

     

    转载于:https://www.cnblogs.com/wudixiaoguaishou/p/11051034.html

    展开全文
  • 今天使用element中的Dialog组件时发现一个问题:当Dialog内容过多时会出现滚动条,而当你滚动到一定位置后关闭Dialog,然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。  通常遇到这样的问题...
  • 最近测试发现在编辑某个商品信息时,滚动条有时会消失,导致页面整个卡住,无法保存商品信息,只能刷新页面后才能再次滚动,影响可以说是非常恶劣了。经过一番掉头发后,我发现了问题所在。 我们知道,el-image可...
  • ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
  • shi'yong使用 使用table组件,不分页,设置scroll 回导致表头出现滚动条样式 ,如下图所示 此时 ,页面渲染的表格标签如下 ... 之所以出现滚动条,是因为加了overflow: scroll, 所以,可以使用以下样式覆盖行内...
  • tabs组件的外层div给固定高度 + 'src="' + uri + node.url + '" style="width:100%;...然后iframe 的滚动条设置为auto 宽度和高度设置为100% 使用该方案解决了我的问题 留存一下为其他童鞋备份一个!
  • 小程序去掉滚动条

    千次阅读 2019-05-15 11:35:25
    小程序去掉滚动条方案: 原因:小程序不允许单独设置页面中单独元素的滚动条样式 只有全局设置 解决方案:在app.wxss 中添加如下代码 即可实现 ...是指去掉scroll-view组件中的滚动条样式。 ...
  • Qt悬浮滚动条-让滚动条不再占用控件的大小

    千次阅读 热门讨论 2017-11-20 10:30:11
    我们在Qt开发中经常会用到带有滚动条的控件,但是自带的滚动条实在太丑。于是我们想到用qss美化滚动条,这是一种很常见的做法。但是当我们只是对滚动条通过一个style做一些美化的话,会发现效果并不是那么完美。例如...
  • 之前在antd官网和通过网络检索发现好多文章都是写的用getPopupContainer这个API,但是我在RangePicker组件上试了好几种写法都不生效,最后发现getCalendarContainer这个API才是有效的,问题解决了~ 解决办法:在...
  • 一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js...
  • echarts 滚动条配置

    千次阅读 2019-07-12 17:33:59
    show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。 backgroundColor:“rgba(47,69,84,0)”, //组件的背景颜色 type: ‘slider’, //slider表示有滑动块的,inside表示内置的 ...
  • 这是一个小小的组件,实现控制带有滚动条的控件(ListView,TreeView等)的滚动条显示。 带有滚动条的控件,通常情况下都是需要显示滚动条的时候,如果水平滚动条和垂直滚动条都需要显示,就一起显示出来。但是有的...
  • App.vue 增加如下样式可以去除 scroll-view 组件滚动条(不支持nvue页面) ::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background:...
  • 原因:使用了a标签当按钮触发modal关闭的时候就会自动跳回浏览器最顶端 解决方案: 不要使用a标签就行了 转载于:https://www.cnblogs.com/JahanGu/p/10276442.html
  • ElementUI表格滚动条位置重置

    千次阅读 2019-12-10 15:03:23
    在使用ElementUI时使用表格组件时遇到了一个问题,当我在弹出层中嵌套使用表格组件时如果我的表格内容过长出现滚动条时,我把滚动条拖放到中间位置后关闭这个弹出层,当我下次重新打开时这个表格的滚动条位置仍然...
  • 用于分组的组件Panel:(面板)属性:1)caption:面板上显示的标题 2)Align:对齐方式 alNone:组件大小和位置不受Parent影响(任何大小、位置) alTop:Parent顶部 alButtom:底部 alLeft:左边 aRight:...
  • Java滚动条

    千次阅读 2018-02-06 16:49:46
    滚动条(JScrollBar)也称为滑块,用来表示一个相对值,该值代表指定范围内的一个整数。例如,用Word编辑文档时,编辑窗右边的滑块对应当前编辑位置在整个文档中的相对位置,可以通过移动选择新的编辑位置。在Swing中...
  • element-ui滚动组件关闭下拉菜单的问题 一、问题说明 目前前端项目中有一个现象是在一个弹窗或者页面中,滚动鼠标内容跟随滚动,打开的下拉菜单也跟随滚动,超出部分显示很不合理,测试同事提过相关问题的bug单,但...
  • 本技巧将指导您改善滚动条的外观,以使其与UI设计相匹配。 我们将看看WebKit浏览器在CSS方面为我们提供了什么,此外,我们还将使用jQuery后备功能来迎合其他浏览器。 寻找捷径? 如果您需要有关样式设计网站特定...
  • 遮罩层有滚动条时解决方法

    千次阅读 2016-11-24 17:09:14
    在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的css。 //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$(document).height(); var bW=$("body...
  • 今天使用element中的Dialog组件时发现一个问题:当Dialog内容过多时会出现滚动条,而当你滚动到一定位置后关闭Dialog,然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。网上找了两种方法都不太...
  • 1.为了能让InputField弄个滚动条真的是翻遍了百度,最后还是在自己的努力下完成了这一壮举。 首先在场景中添加一个ScrollRect(滚动视图),以下是我的设置,可以根据自己的喜好设置,建议将惯性关掉。 2.在滚动...
  • vue element 滚动条 横向隐藏

    千次阅读 2020-06-17 17:47:30
    <template> <div> <div class="box"> <el-scrollbar>...因为原生的滚动条太丑了</p> <p>发现elementui中有个隐藏的组件</p> <p>优化滚动条样式</p>
  • 请教下大佬怎么实现 QScrollArea 中的滚动条,即使在滚动区域小于要显示的窗口时也显示出来,并且还可以自由拖拽? 我用过 setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn); 始终显示滚动条, 但是当QScroll...
  • 在一些场景中,比如弹出一个带滚动条的浮窗,为了避免在操作时触发原生滚动条,这时我们需要禁用掉浏览器的滚动条。 常用的三种方法如下。 方法一 让body不能滚动。 export const forbidBodyScoll = () => {...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,601
精华内容 10,640
关键字:

组件关闭滚动条