风也温柔

计算机科学知识库

css添加滚动条 CSS滚动条实现步骤及美化小技巧

  在原来的 html 的时候,我们可以这样定义整个页面的滚动条

  body{

  --color:#; /- 最外左 -/

  --color:#fff; /- 左二 -/

  -face-color:#; /- 面子 -/

  -arrow-color:#666; /- 箭头 -/

  --color:#; /- 右二 -/

  --color:#; /- 右一 -/

  -base-color:#; /- 基色 -/

  -track-color:#;/- 滑道 -/

  }

  但是同样的代码,我们应用在 xhtml 下就不起作用了,我相信好多朋友也遇到过同样的问题

  那么怎么才能在 xhtml 下应用滚动条样式呢?看下列代码

  html{

  --color:#; /- 最外左 -/

  --color:#fff; /- 左二 -/

  -face-color:#; /- 面子 -/

  -arrow-color:#666; /- 箭头 -/

  --color:#; /- 右二 -/

  --color:#; /- 右一 -/

  -base-color:#; /- 基色 -/

  -track-color:#;/- 滑道 -/

  }

  这段代码和上一段唯一的不同就是在 CSS 定义的元素上,一个是 body 一个是 html。我们再测试一下,把 html 页面的"body"修改成"html"测试一下,发现依然可以实现效果。那到底是为什么呢?

  从字面上来看,xhtml 比 html 多一个 x,那么这个 x 其实也就是 xml,为什么要加一个 xml 在里面?其实最根本的原因就是要让 html 更加结构化标准化(因为 html 实在是太烂)。我们在 html 里面定义的是 body,因为 html 不是很标准所以这样可以生效css添加滚动条,而在xhtml里面这样就不行了,我看看那个图很明显,body 标签本身不是根元素,只有 html 才是根元素,而页面的滚动条也是属于根元素的,所以这就是我们为什么定义 body 没有效果的原因,因为我们定义的只是一个子原素。ok,我们知道了原理css添加滚动条 CSS滚动条实现步骤及美化小技巧,来做一个试验如果把定义"body"或"xhtml"换成​*​,

  *{

  --color:#;

  --color:#fff;

  -face-color:#;

  -arrow-color:#666;

  --color:#;

  --color:#;

  -base-color:#;

  -track-color:#;

  }

  在html和xhtml都通过css添加滚动条,因为*就是定义页面上的任何标签当然也包括了“html”这个标签。

  (ps:其实与其说是 html 与 xhtml 的区别到不如说是有无 XHTML 1.0 的区别,但是如果你把页面的 XHTML 1.0 去掉的话,那么这个页面就没有 ,默认的显示方式就是html4.01,不过你要把XHTML 1.0 修改成 HTML 4.01 同样页面定义 body 也不会有效果的,虽然这个页面的标准是html 4.01)

  文章来源:https://m.w3cschool.cn/css/css-scrollbar.html