scroll滚动条样式修改

时间:2022-10-28 22:55:49

一般我们有两种情况会出现滚动条,一种是overflow,一种是使用scroll.

当我们需要改变这个滚动条样式的时候,我们需要做以下的修改:

html:

<div id="style-2">里是富文本这里是富文本这里是富文本这里是富文本这里是富文本这里是富文本</div>

css:

#style-2{height:20px;width:50px;overflow:auto;}
#style-::-webkit-scrollbar-track{background-color: #242d3e;-webkit-box-shadow: inset   6px #242d3e;}
/*定义滚动条高宽及背景*/
#style-::-webkit-scrollbar{width: 5px;background-color: #242d3e;}
/*定义滚动条*/
#style-::-webkit-scrollbar-thumb {background-color: #09a5ee;border-radius: 5px;}

scroll滚动条样式修改的更多相关文章

  1. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  2. chrome和IE下的滚动条样式修改

    火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...

  3. HTML 滚动条样式修改

    <style> .innerbox{ overflow-y: auto; background-color: #f8f8f8; height: 200px; padding: 10px; ...

  4. css滚动条样式修改

    .activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...

  5. 前端给div加滚动条样式修改

    <!DOCTYPE html> <html lang="en">       <head>             <meta chars ...

  6. css修改整个项目的滚动条样式

    在项目中,滚动条不可避免的药出现.设置统一规范的滚动条也是必然.用一个独立的css文件即可修改整个项目中的滚动条样式 . scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-web ...

  7. css 溢出滚动条显示,修改滚动条样式

    文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...

  8. css修改浏览器默认的滚动条样式

    //滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...

  9. css 修改默认滚动条样式

    来自:https://www.cnblogs.com/juqian/p/6273808.html 侵删 <div class="inner"> <div clas ...

随机推荐

  1. Android BLE 蓝牙编程(二)

    大家中秋快乐啊--哈哈,今天继续工程项目吧! 上篇我们已经实现了蓝牙设备的扫描,本篇我们来通过list展示扫描到的设备并 实现点击连接. 先贴出上篇的完整的MainActivity的方法: packa ...

  2. 开发android App干坏事&lpar;二&rpar;-wifi控制

    本来今天打算换个话题的,鉴于昨天android篇反响还不错,最近也是在做这方面的东西,今天聊聊一个新的android的发现-wifi的控制(好吧,其实也不能说是坏事,只是觉得wifi安全还是要引起警示 ...

  3. CentOS搭建socket5代理服务器

    1.安装socket5依赖包 yum -y install gcc automake make pam-devel openldap-devel cyrus-sasl-devel   2.下载ss5并 ...

  4. Python str字符串常用到的函数

    # -*- coding: utf-8 -*- x='pythonnnnnnoooo' print type(x) # <type 'str'> 输出类型 print x.capitali ...

  5. CSS基础知识——选择器

    选择器 元素选择器# 文档元素为最基本的选择器 例子:div{属性:值}; 选择器分组 例子:h2,p{属性:值}; 表示符合这两种规则的元素设置相同的属性值 通配选择器 表示所有元素 类选择器 应用 ...

  6. 简单高效读写修改整个文本Slurp

    语法: use File::Slurp; #标量环境下一次读取所有文本内容到标量中. my $text = read_file( 'filename' ) ; #  读取文本的所有行到数组中. my ...

  7. dede 标签调用

    调用当前栏目名字 {dede:type}[field:typename /]{/dede:type} 调用某栏目名字 {dede:type typeid='1'}[field:typename /]{ ...

  8. 543&period; Diameter of Binary Tree

    https://leetcode.com/problems/diameter-of-binary-tree/#/description Given a binary tree, you need to ...

  9. 记录python接口自动化测试--从excel中读取params参数传入requests请求不生效问题的解决过程&lpar;第七目&rpar;

    在第六目把主函数写好了,先来运行一下主函数 从截图中可以看到,请求参数打印出来了,和excel中填写的一致 但是每个接口的返回值却都是400,提示参数没有传进去,开始不知道是什么原因(因为excel中 ...

  10. 初学JSP

    一. 基本了解     JSP是应用最广泛的表现层技术,它和Servlet是Java EE的两个基本成员.JSP和Servlet本质是一样的,因为JSP最终编译成ServLet才能运行. 1.1 we ...