首页 > 其他分享 >滚动条样式

滚动条样式

时间:2023-06-09 15:11:05浏览次数:42  
标签:样式 较长时间 sss 滚动条 测试 webkit 得出

 <div class="sss">
   较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出较长时间的测试得出
  </div>
</template>

<style>
  .sss{
    width:200px;
    height:150px;
      overflow-x: hidden;
      overflow-y: auto;
  }
/*滚动条样式*/

.sss::-webkit-scrollbar {/*滚动条整体样式*/

        width:4px;/*高宽分别对应横竖滚动条的尺寸*/

        height:4px;

}

.sss::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

        border-radius:5px;

        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);

        background:rgba(0,0,0,0.2);  /*设置滚动条颜色*/

}

.sss::-webkit-scrollbar-track {/*滚动条里面轨道*/

        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);

        border-radius:0;

        background:rgba(0,0,0,0.1);

}

  

标签:样式,较长时间,sss,滚动条,测试,webkit,得出
From: https://www.cnblogs.com/alizhi/p/17469256.html

相关文章

  • 小程序模板语法样式与页面配置
    文章和代码已经归档至【Github仓库:<https://github.com/timerring/front-end-tutorial>】或者公众号【AIShareLab】回复小程序也可获取。小程序模板与配置WXML模板语法数据绑定在data中定义数据,在WXML中使用数据。使用Mustache{{}}语法:绑定内容绑定属性运算(三元运算、算术......
  • JQ插件:nicescroll自定义滚动条
    参考:http://www.areaaperta.com/nicescroll/该插件支持移动设备;可上下、左右拖拉滚动;看图,上面的分类菜单就是。导入:<scripttype="text/javascript"src="js/jquery.nicescroll.min.js"></script>定义需要滚动的区域,#boxscroll是vieport,#categorys是c......
  • 重新设置a-table空状态样式
    <a-config-provider><template#renderEmpty><imgsrc="../../../assets/images/no-data.png"alt=""width="120px"height="120px"/>......
  • Webpack 插件实现 CSS 样式尺寸单位转换
    Webpack插件实现CSS样式尺寸单位转换实现方式一插件代码以下是编写的一个Webpack插件,用于将样式文件中以rpx为单位的值转换为以px为单位的值(换算比率为1px=2rpx):constpluginName="CssSzieConvertPlugin";classCssSzieConvertPlugin{apply(compiler){......
  • vue3使用ElementPlus的消息el-message样式不生效或者被遮盖(z-index)
    一、el-message自定义样式不生效想改弹出框的位置时不生效,使用了el-message的自定义类的custom-class属性也不行。原因应该是加了scoped后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染,但是message生成的dom是没有添加data-v-xxx属性的,所以样式无效。解决方式:js动态设......
  • input框记住密码之后样式取消
    input:-webkit-autofill{-webkit-text-fill-color:#fff!important;/*记住密码的字的颜色*/transition:background-color5000sease-in-out0s;/*延时渲染背景色来去除背景色*/caret-color:#fff;/*光标颜色*/}input:focus{/*外边框线去除*/outline:none;......
  • el-row使用非零 gutter 时宽度溢出出现水平滚动条
    验证代码<template><div><el-alerttitle="1.如果为row直接添加gutter的话会导致超出父盒子的宽度,可以为父盒子设置左右的padding=gutter/2"type="success":closable="false"></el-alert><el-alert......
  • 明明加载好了css,js文件,页面的样式还是不对的解决办法
    页面内容的格式乱七八糟的…用F12开发人员工具检查了一下,没有发现任何问题最后,求助了bobby老师答曰:你缺乏前端知识,浏览器中有缓存,ctrl+f5强制刷新一下就好了恩,好了…......
  • WPF中的Style(风格,样式)
    在WPF中我们可以使用Style来设置控件的某些属性值,并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件,比如说我们想将窗口中的所有按钮都保持某一种风格,那么我们可以设置一个Style,而不必分别设置每个按钮的风格。Style是作为一种资源被保存下来的.看下面的例子:<Window.......
  • 如何设计React应用程序的样式——比较不同的选项
    样式在创建具有视觉吸引力和用户友好的Web应用程序方面起着至关重要的作用。对于React应用程序,可以通过多种方式来设置组件和UI元素的样式。在本文中,我们将探讨几个流行的选项,包括纯CSS、CSS模块、CSS预处理器、TailwindCSS、CSS-in-JS库(如StyledComponents)以及预构......