广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >DIV如何实现自动滚动功能及滚动条颜色修改
  • 795
分享到

DIV如何实现自动滚动功能及滚动条颜色修改

2024-04-02 19:04:59 795人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关DIV如何实现自动滚动功能及滚动条颜色修改,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.DIV 自动滚动<script t

这篇文章将为大家详细讲解有关DIV如何实现自动滚动功能及滚动条颜色修改,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

1.DIV 自动滚动

<script type="text/javascript">
function startmarquee(lh, speed, delay) {
var t;
var oHeight = 300; 
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(20, 40, 50);
} 
</script>
 <div id="show" style="height: 600px; width: 100%; overflow-y: scroll;scrollbar-base-color:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;SCROLLBAR-ARROW-COLOR:#ffffff; overflow-x: none;"></div>

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 设置或检索滚动条基准颜色。

关于“DIV如何实现自动滚动功能及滚动条颜色修改”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: DIV如何实现自动滚动功能及滚动条颜色修改

本文链接: https://www.lsjlt.com/news/79689.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • DIV如何实现自动滚动功能及滚动条颜色修改
    这篇文章将为大家详细讲解有关DIV如何实现自动滚动功能及滚动条颜色修改,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.DIV 自动滚动<script t...
    99+
    2022-10-19
  • div+css如何实现隐藏滚动条
    这篇文章主要介绍div+css如何实现隐藏滚动条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css的全称是什么css的全称是Cascading Style Sheets(层叠样式表),它是一种用来表现HTML或XM...
    99+
    2023-06-14
  • js如何实现彩色条纹滚动条效果
    这篇文章主要介绍了js如何实现彩色条纹滚动条效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。左侧可用调色板选择条纹颜色效果图:代码如下:&...
    99+
    2022-10-19
  • jQuery如何实现响应滚动条事件功能
    这篇文章主要为大家展示了“jQuery如何实现响应滚动条事件功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现响应滚动条事件功能”这篇文章吧...
    99+
    2022-10-19
  • JS如何实现自定义滚动条效果
    这篇文章给大家分享的是有关JS如何实现自定义滚动条效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下<head>  <meta ...
    99+
    2022-10-19
  • Android如何实现动态滚动波形图(心电图)功能
    目录一、前言二、效果图三、功能实现四、如何使用一、前言 最近涉及的某个医疗相关的业务,传感器数据传递上来需要实现示波器的效果,心电图的效果,目前交付效果还算理想,于是封装了一下,方便...
    99+
    2022-11-12
  • 如何实现平滑滚动页面到顶部的功能
    如何实现平滑滚动页面到顶部的功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.使用CSS完成功能的最高境界,只用CSS就搞定。代码如下:html { &...
    99+
    2023-06-09
  • jQuery如何实现返回顶部按钮和scroll滚动功能
    小编给大家分享一下jQuery如何实现返回顶部按钮和scroll滚动功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!jQuer...
    99+
    2022-10-19
  • vue如何实现每次渲染完页面后div的滚动条保持在最底部
    这篇文章主要介绍vue如何实现每次渲染完页面后div的滚动条保持在最底部,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例如下://每次页面渲染完之后滚动条在最底部 updated:...
    99+
    2022-10-19
  • win7笔记本触摸板如何实现滚屏功能在浏览网页可以翻页和滚动
    现在用笔记本的用户已经越来越普遍了,而触摸板是每一台电脑都会必备的,想必大家对触摸板应该都很熟悉吧,当我们没有安装外接键盘的时候就是用触摸板代替鼠标移动操作的,可是有不少用户发现不管在笔记本触摸板上面如何移动,在浏览网页...
    99+
    2023-06-06
    win7 笔记本 触摸板 滚屏 功能
  • 微信小程序如何实现自定义弹出模态框禁止底部滚动功能
    小编给大家分享一下微信小程序如何实现自定义弹出模态框禁止底部滚动功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!图示:wxml代码:<view class='fi...
    99+
    2022-10-19
  • Python如何实现获取网页内容及自动填表单与登录功能
    本文小编为大家详细介绍“Python如何实现获取网页内容及自动填表单与登录功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“Python如何实现获取网页内容及自动填表单与登录功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来...
    99+
    2023-07-06
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作