设置滚动条样式

这次给大家带来设置滚动样式,设置滚动条样式的注意事项有哪些,下面就是实战案例,一起来看一下。

废话不多说了,直接给大家贴代码了。具体代码如下所示:

1.p 自动滚动

function startmarquee(lh, speed, delay) {var t;var oHeight = 300; /** p的高度 **/var p = false;var o = document.getElementById("show");var preTop = 0;o.scrollTop = 0;function start() {t = setInterval(scrolling, speed);o.scrollTop += 1;}function scrolling() {if (o.scrollTop % lh != 0&& o.scrollTop % (o.scrollHeight - oHeight - 1) != 0) {preTop = o.scrollTop;o.scrollTop += 1;if (preTop >= o.scrollHeight || preTop == o.scrollTop) {o.scrollTop = 0;}} else {clearInterval(t);setTimeout(start, delay);}}setTimeout(start, delay);}window.onload = function () {/**startmarquee(一次滚动高度,速度,停留时间);**/startmarquee(20, 40, 50);}  

登录后复制

2.滚动条颜色

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色 crollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色scrollbar-face-color 设置或检索滚动条3D表面(ThreedFace)的颜色 scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色scrollbar-shadow-color 设置或检索滚动条3D界面的暗边(ThreedShadow)颜色 scrollbar-dark-shadow-color 设置或检索滚动条暗边框(ThreedDarkShadow)颜色 scrollbar-base-color 设置或检索滚动条基准颜色。

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

三种绝对定位元素的水平垂直居中的办法

width:100%;与width:auto的使用区别

以上就是设置滚动条样式的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2898233.html

(0)
上一篇 2025年3月10日 23:32:42
下一篇 2025年2月26日 01:13:04

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • CSS样式的覆盖规则

    下面为大家带来一篇css样式覆盖规则全面了解。内容挺不错的,现在就分享给大家,也给大家做个参考。 大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义。其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式…

    编程技术 2025年3月10日
    200
  • 利用CSS3实现的文字定时向上滚动

    大家以前基本是用javascript来实现文字定时向上滚动的效果,那么今天给大家分享下利用css3来实现这一效果,有需要的可以参考学习。 话不多说,直接上实例代码 nbsp;html>moveUp ul,li{ margin:0; p…

    编程技术 2025年3月10日
    200
  • css flex布局(弹性布局)的属性有哪些?css flex布局属性的介绍

    本篇文章给大家带来的内容是关于css flex布局(弹性布局)的属性有哪些?css flex布局属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒…

    编程技术 2025年3月10日
    200
  • 如何改变css伪元素的样式

    本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助! 一、CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果。 伪元素的用法如下: selector:pseudo-element {property:val…

    2025年3月10日
    200
  • 在html元素中设置css样式的方式是什么

    如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置”id” 和 “class”选择器。 (推荐教程:CSS教程) 下面我们来分别说一下id选择器和class选择器。 id选择…

    2025年3月10日
    200
  • 书写CSS样式有哪三种方式

    书写css样式的三种方式: (推荐教程:CSS教程) 一、行内式 是通过标签的style属性来设置元素的样式,其基本语法格式如下: 立即学习“前端免费学习笔记(深入)”; HelloWord 登录后复制 语法中style是标签的属性,实际上…

    2025年3月10日
    200
  • css样式重置

    对CSS重置的个人理解: (推荐教程:css视频教程) 首先,我觉得像我一样对于理解概念无感,容易混淆的前端小白要清楚什么是css重置样式,就要弄清楚两个概念:CSS Reset以及css重置(其实概念很相近,但是还是有所区别的),不然傻傻…

    2025年3月10日
    200
  • css边框样式如何定义

    css定义边框样式的方法:可以利用border-style属性来设置边框样式,如【p.dotted {border-style:dotted;}】,表示将边框设置为点状边框。 本文操作环境:windows10系统、css 3、thinkpa…

    2025年3月10日
    200
  • 分享几款非常好看的鼠标悬停样式

    前言: 当我们需要为鼠标悬停添加一个样式,都会使用hover伪类,通过它我们可以在鼠标移动到元素上时向此元素添加特殊的样式。比如一个普通的URL,当我们将鼠标移动到URL链接上,它会变色。 一、概述 在现实的应用场景也非常之多。最常见的是网…

    2025年3月10日 编程技术
    200
  • css有哪几类样式

    css有三种类样式,分别是:1、行内样式,结构的内部,即写在标签内的样式;2、外联式是将所有的样式放在一个或多个以【.css】为扩展名的外部样式表文件中;3、内联样式写在HTML页面内部,存放于head标记当中。 本教程操作环境:windo…

    2025年3月10日
    200

发表回复

登录后才能评论