【转】滚动条样式

最新推荐文章于 2024-07-19 16:14:52 发布
最新推荐文章于 2024-07-19 16:14:52 发布
阅读量121 收藏
点赞数
文章标签： 操作系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anole2012/article/details/84854594
版权

http://blog.csdn.net/hanshileiai/article/details/40398177

 

 

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  • ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
  • ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

 

定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？

伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。

 

 

  1. :horizontal  
  2. //horizontal伪类适用于任何水平方向上的滚动条  
  3.   
  4. :vertical  
  5. //vertical伪类适用于任何垂直方向的滚动条  
  6.   
  7. :decrement  
  8. //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮  
  9.   
  10. :increment  
  11. //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮  
  12.   
  13. :start  
  14. //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面  
  15.   
  16. :end  
  17. //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面  
  18.   
  19. :double-button  
  20. //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  21.   
  22. :single-button  
  23. //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  24.   
  25. :no-button  
  26. no-button伪类表示轨道结束的位置没有按钮。  
  27.   
  28. :corner-present  
  29. //corner-present伪类表示滚动条的角落是否存在。  
  30.   
  31. :window-inactive  
  32. //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。  
  33.   
  34. ::-webkit-scrollbar-track-piece:start {  
  35. /*滚动条上半边或左半边*/  
  36. }  
  37.   
  38. ::-webkit-scrollbar-thumb:window-inactive {  
  39. /*当焦点不在当前区域滑块的状态*/  
  40. }  
  41.   
  42. ::-webkit-scrollbar-button:horizontal:decrement:hover {  
  43. /*当鼠标在水平滚动条下面的按钮上的状态*/  
  44. }  

 

----------------------------------------------------------------------------------------------------------------------------------

 

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
  <title>CSS3自定义滚动条图片版-轩枫阁</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #container{
 width: 100%;
 height: 1200px;
 line-height: 600px;
 text-align: center;
 background: #ccc;
 }
 /*定义滚动条的高宽*/
 ::-webkit-scrollbar {
 width: 16px;
 height: 16px;
 }
 /*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
 /*显示滚动条上方的渐增按钮*/
 ::-webkit-scrollbar-button:start:decrement,
 /*显示滚动条上方的渐减按钮*/
 ::-webkit-scrollbar-button:end:increment {
 display: block;
 }
 /*隐藏滚动条上方的渐增按钮*/
 ::-webkit-scrollbar-button:vertical:start:increment,
 ::-webkit-scrollbar-button:vertical:end:decrement {
 display: none;
 }
 /* 定义滚动条渐增按扭的样式 */
 ::-webkit-scrollbar-button:end:increment {
 background-image: url(./images/scroll_cntrl_dwn.png);
 }
 /* 定义滚动条渐减按扭的样式 */
 ::-webkit-scrollbar-button:start:decrement {
 background-image: url(./images/scroll_cntrl_up.png);
 }
 /* 垂直滚动条的第三层轨道的上段 */
 ::-webkit-scrollbar-track-piece:vertical:start {
 background-image: url(./images/scroll_gutter_top.png), url(./images/scroll_gutter_mid.png);
 background-repeat: no-repeat, repeat-y;
 }
 /* 垂直滚动条的第三层轨道的下段 */
 ::-webkit-scrollbar-track-piece:vertical:end {
 background-image: url(./images/scroll_gutter_btm.png), url(./images/scroll_gutter_mid.png);
 background-repeat: no-repeat, repeat-y;
 background-position: bottom left, 0 0;
 }
 /* 垂直滚动条的滑动块 */
 ::-webkit-scrollbar-thumb:vertical {
 height: 56px;
 -webkit-border-image: url(./images/scroll_thumb.png) 8 0 8 0 stretch stretch;
 border-width: 8 0 8 0;
 }
  
 </style>
 </head>
 <body>
  <div id="container">CSS3自定义滚动条图片版<br/>请在chrome下看右侧滚动条，其他浏览器没有效果哦</div>
 </body>
 

</html>

------------------------------------------------------------------------------------------------------------------------------

 

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
  <title>CSS3自定义滚动条-轩枫阁</title>
 <style>
 header
 {
 font-family: 'Lobster', cursive;
 text-align: center;
 font-size: 25px;
 }
  
 #info
 {
 font-size: 18px;
 color: #555;
 text-align: center;
 margin-bottom: 25px;
 }
  
 a{
 color: #074E8C;
 }
  
 .scrollbar
 {
 margin-left: 30px;
 float: left;
 height: 300px;
 width: 65px;
 background: #F5F5F5;
 overflow-y: scroll;
 margin-bottom: 25px;
 }
  
 .force-overflow
 {
 min-height: 450px;
 }
  
 #wrapper
 {
 text-align: center;
 width: 500px;
 margin: auto;
 }
  
 /*
 * STYLE 1
 */
  
 #style-1::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
 }
  
 #style-1::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-1::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #555;
 }
  
 /*
 * STYLE 2
 */
  
 #style-2::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
 }
  
 #style-2::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-2::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #D62929;
 }
  
 /*
 * STYLE 3
 */
  
 #style-3::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-3::-webkit-scrollbar
 {
 width: 6px;
 background-color: #F5F5F5;
 }
  
 #style-3::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 }
  
 /*
 * STYLE 4
 */
  
 #style-4::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-4::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-4::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 border: 2px solid #555555;
 }
  
  
 /*
 * STYLE 5
 */
  
 #style-5::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-5::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-5::-webkit-scrollbar-thumb
 {
 background-color: #0ae;
  
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
 color-stop(.5, rgba(255, 255, 255, .2)),
 color-stop(.5, transparent), to(transparent));
 }
  
  
 /*
 * STYLE 6
 */
  
 #style-6::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-6::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-6::-webkit-scrollbar-thumb
 {
 background-color: #F90;
 background-image: -webkit-linear-gradient(45deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 7
 */
  
 #style-7::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-7::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-7::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-image: -webkit-gradient(linear,
 left bottom,
 left top,
 color-stop(0.44, rgb(122,153,217)),
 color-stop(0.72, rgb(73,125,189)),
 color-stop(0.86, rgb(28,58,148)));
 }
  
 /*
 * STYLE 8
 */
  
 #style-8::-webkit-scrollbar-track
 {
 border: 1px solid black;
 background-color: #F5F5F5;
 }
  
 #style-8::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-8::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 }
  
  
 /*
 * STYLE 9
 */
  
 #style-9::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-9::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-9::-webkit-scrollbar-thumb
 {
 background-color: #F90;
 background-image: -webkit-linear-gradient(90deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 10
 */
  
 #style-10::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-10::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-10::-webkit-scrollbar-thumb
 {
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(0, 0, 0, .2) 50%,
 rgba(0, 0, 0, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 11
 */
  
 #style-11::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-11::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-11::-webkit-scrollbar-thumb
 {
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
 rgba(255, 255, 255, 0.5) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.5) 50%,
 rgba(255, 255, 255, 0.5) 75%,
 transparent 75%,
 transparent)
 }
  
 /*
 * STYLE 12
 */
  
 #style-12::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #444444;
 }
  
 #style-12::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-12::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
 }
  
 /*
 * STYLE 13
 */
  
 #style-13::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #CCCCCC;
 }
  
 #style-13::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-13::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
 }
  
 /*
 * STYLE 14
 */
  
 #style-14::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
 background-color: #CCCCCC;
 }
  
 #style-14::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-14::-webkit-scrollbar-thumb
 {
 background-color: #FFF;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, 1) 0%,
 rgba(0, 0, 0, 1) 25%,
 transparent 100%,
 rgba(0, 0, 0, 1) 75%,
 transparent)
 }
  
 /*
 * STYLE 15
 */
  
 #style-15::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-15::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-15::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
 40% 0%,
 75% 84%,
 from(#4D9C41),
 to(#19911D),
 color-stop(.6,#54DE5D))
 }
  
 /*
 * STYLE 16
 */
  
 #style-16::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-16::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-16::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(top,
 #e4f5fc 0%,
 #bfe8f9 50%,
 #9fd8ef 51%,
 #2ab0ed 100%);
 }
  
  
 </style>
 </head>
 <body>
 <div id="wrapper">
 <div class="scrollbar" id="style-default">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-2">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-3">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-4">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-5">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-6">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-7">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-8">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-9">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-10">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-11">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-13">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-14">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-15">
  <div class="force-overflow"></div>
 </div>
 </div>
 </body>
 

</html>

 

 

 

 

 

anole2012
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
易语言CSS样式滚动条
08-21
易语言CSS样式滚动条源码系统结构:复制样式,颜色值转HTML,HTML转颜色值,进制_十六到十,绘制画板,填矩形范围,当前选择项, ======窗口程序集1 || ||------_按钮1_被单击 || ||------复制样式 || |
【CSS】滚动条样式详解
热门推荐
NineWaited的博客
08-21 4万+
浏览器设置滚动条样式详解
滚动条的样式说明
xianyang988的专栏
12-21 431
1、Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置  overflow-x 水平方向内容溢出时的设置  overflow-y 垂直方向内容溢出时的设置 以上三个属性设置的值为visible、scroll、hidden、auto。visible 默认值。使用该值时，无论设置的"width"和"height" 的值是多少，其中的内容无论是否超出范围
转载-滚动条的CSS样式
沧海一粟
06-14 1214
IE下的滚动条样式 IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。 这些样式规则很简单： scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color;
CSS 设置滚动条样式的实例代码
09-24
标题提到的"CSS 设置滚动条样式的实例代码"是关于如何通过CSS3来改变网页滚动条的外观。下面我们将详细探讨这个主题。 首先，滚动条由几个组成部分组成： 1. `::-webkit-scrollbar`：这是滚动条的整体部分，你可以...
panel自定义滚动条
07-16
5. **自定义外观和行为**：通过重绘滚动条，可以改变其外观，比如颜色、样式等。这通常需要覆盖`OnPaint`方法，使用`Graphics`对象绘制滚动条。另外，也可以通过扩展滚动条类，添加自定义的行为或功能。 在实际开发...
javascript实现滚动条效果
10-15
JavaScript 实现滚动条效果是一种常见的前端技术，它允许开发者自定义网页中的滚动条样式和行为。在本示例中，我们将深入探讨如何使用纯 JavaScript 和 CSS 来创建一个具有平滑滚动功能的自定义滚动条。 首先，CSS ...
操作系统核心之存储与控制
yuanwu932730169的博客
07-16 302
在操作系统中，存储和控制是两个核心功能，它们共同支持着系统的正常运行和高效管理。
第二节 shell脚本基础(5)(6)(7)
weixin_73298423的博客
07-15 407
shell的执行方式,调试和退出值
windows cmd和PowerShell两种命令行工具区别；常见 PowerShell 命令；ps1脚本例子
最新发布
weixin_42357472的博客
07-19 283
是 Windows 操作系统中两种不同的命令行解释器，它们在设计理念、功能和命令语法上有很大的区别。
HCNA VRP基础
hmxm6的博客
07-15 593
交换机可以隔离冲突域，路由器可以隔离广播域，这两种设备在企业网络中应用越来越广泛。随着越来越多的终端接入到网络中，网络设备的负担也越来越重，这时网络设备可以通过专有的VRP系统来提升运行效率。通过路由平台VRP是华为公司数据通讯产品的通用操作系统平台，他以UP业务为核心，采用组件化的体系结构，在实现丰富功能特性的同时，还提供了基于应用的可裁剪和可扩展的功能,使得路由器和交换机的运行笑了大大增加。能对VRP熟练地进行配置和操作是对网络工程师地一种基本要求。
python训练模型报错：BrokenPipeError: [Errno 32] Broken pipe
Dxy1239310216的博客
07-18 313
如果问题持续存在，并且你的项目不是必须在 Windows 上运行，考虑在 Unix/Linux 系统上运行你的代码。确保在数据加载器中使用的任何自定义函数或类都是可序列化的，因为多进程需要能够在不同进程间传递它们。进行多进程数据加载时尤其常见，尤其是在 Windows 系统上，因为 Windows 对多进程的支持与 Unix/Linux 系统有所不同。有时候，错误可能是由其他部分的代码引起的，而不是直接由数据加载器引起。如果问题依然存在，你可能需要更详细地检查你的代码或寻求更专业的帮助。
定制 Linux 内核的意义
地球空间
07-17 290
2. **配置内核**：使用 `make menuconfig` 或 `make xconfig` 配置内核，选择需要支持的硬件和功能。1. **性能优化**：通过定制内核，可以针对特定的硬件或应用场景优化性能，比如减少不必要的驱动支持、优化调度算法等。7. **持续维护**：随着时间的推移，可能需要对内核进行更新和维护，以支持新的硬件和功能。6. **测试和调试**：启动系统，测试新内核的功能和性能，根据需要进行调试和优化。4. **安装内核**：编译完成后，将生成的内核镜像和相关的模块安装到系统中。
day04：Redis和店铺营业状态设置
m0_69266818的博客
07-15 877
介绍了Redis命令和用java操作redis还有营业额状态接口的书写
Linux系统和常用操作命令
Baizeh的博客
07-16 1290
把windows开发好的程序部署到linux操作系统上，因为windows操作系统漏洞太多容易被攻击。
文件在Linux下为binary格式在Windows下为utf-8格式
qq_38220334的博客
07-17 330
想着是不是之前遇到的问题，有可能是文件中含有特殊字符，然后用vim命令来编辑这个文件，发现，还真是含有一个特殊字符，然后将它删除掉，文件就变成utf-8格式的文件了。在Windows下和Mac下都是没有问题的，在华为云服务器上也是没问题的（操作系统不是centos），但是在自己搭建的Linux服务器（centos）上是有问题的。用shell或者Python脚本去将这个文件转为utf-8格式的，但是都失败了。
linux系统 mysql-8.0.32安装
w20228396的博客
07-16 376
检查系统是否安装了mariadb数据库， mariadb数据库是mysql的分支，是免费开源的。初始化数据库，安装加密算法（初始化时候，密码将在log-error=/data/mysql-8.0.32/error.log中产生）若linux中安装了mariadb数据库，先卸载掉， mariadb数据库可能与安装mysql发生冲突。再去bin目录下，执行 mysqld_safe --skip-grant-tables &然后mysql -uroot -p登陆，直接回车，不需要密码可登陆进去。
【Linux】文件管理常用命令【超详细】
2301_82023330的博客
07-16 722
这篇博客介绍了Linux系统中的常用文件管理命令，包括`ls`、`cd`、`cp`、`mv`、`rm`和`mkdir`等。通过这些命令，用户可以高效地浏览目录、复制和移动文件、删除文件以及创建新目录。文章详细讲解了每个命令的基本用法和常见选项，并通过实例演示了这些命令在实际操作中的应用，帮助读者掌握文件管理的基本技能，提升Linux系统的使用效率。
鸿蒙语言基础类库：【@system.mediaquery (媒体查询)】
2301_76813281的博客
07-17 439
给MediaQueryList添加回调函数，回调函数应在onShow生命周期之前添加，即需要在onInit或onReady生命周期里添加。以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。根据媒体查询条件，创建MediaQueryList对象。移除MediaQueryList中的回调函数。matches状态变化时的执行函数。定义MediaQuery列表信息。定义MediaQuery事件。
easyui 鼠标滚动事件
06-01
EasyUI 是一套基于 jQuery 的 UI 组件库，可以很方便地实现鼠标滚动事件的监听。 EasyUI 中的滚动条组件 `scrollbar` 本身就支持鼠标滚动事件，可以通过 `onScroll` 属性来指定滚动事件的处理函数。当滚动条被滚动时，该处理函数会被调用。 下面是一个示例代码： ```html <div id="my-scrollbar" style="height: 200px;"> <!-- 滚动内容 --> </div> <script> $('#my-scrollbar').scrollbar({ onScroll: function(event) { // 获取滚动的方向及距离 const scrollDirection = event.delta > 0 ? 'down' : 'up'; const scrollDistance = Math.abs(event.delta); // 处理滚动事件 console.log(`Scroll ${scrollDirection} ${scrollDistance}px`); } }); </script> ``` 在上面的代码中，我们首先创建了一个高度为 200px 的 `div` 元素，并使用 EasyUI 的 `scrollbar` 组件将其转换为带有滚动条的容器。然后，我们使用 `onScroll` 属性指定了滚动事件的处理函数。在该处理函数中，我们可以通过 `event.delta` 属性获取滚动的距离，并根据其正负值判断滚动的方向。最后，我们可以处理滚动事件并打印相应的信息到控制台中。 需要注意的是，由于 EasyUI 中的滚动条组件是基于 jQuery 的，因此需要先引入 jQuery 库。另外，如果需要自定义滚动条的样式，可以参考 EasyUI 文档中的相关说明。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值