一个javascript实现的滚动条

最新推荐文章于 2023-03-31 16:04:21 发布
最新推荐文章于 2023-03-31 16:04:21 发布
阅读量2.3k 收藏
点赞数
分类专栏： javascript 文章标签： javascript function class xhtml events object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pughua/article/details/2589657
版权
最近空闲时间比较多，就决定抽点时间好好的研究一下javascript脚本控制 简单的实现了滚动条，只实现拖动，其他功能还没有实现 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

.scrollbar {

		position: absolute;

		left: 10%;

		width: 80%;

		height: 16px;

		z-index: 1000;

	}

.scrollbar .track {

		position: absolute;

		left: 1%;

		width: 98%;

		height: 16px;

		filter: alpha(opacity=30);

		opacity: 0.3;

	}

.scrollbar .arrow-left {

		position: absolute;

	}

.scrollbar .arrow-right{

		position: absolute;

		right: 0px;

	}

.scrollbar .bar{

		position: absolute;

		height: 16px;

		left: 25px;

	}

</style>

<script type="text/javascript">

var info=function(){

     function getElementsByClass (object, tag, className) {//根据css类得到对象

		var o = object.getElementsByTagName(tag);

		for ( var i = 0, n = o.length, ret = []; i < n; i++)

			if (o[i].className == className) ret.push(o[i]);

		if (ret.length == 1) ret = ret[0];

		return ret;

	}

	function addEvent (o, e, f) {// 为对象添加对象

		if (window.addEventListener) o.addEventListener(e, f, false);

		else if (window.attachEvent) r = o.attachEvent('on' + e, f);

	}

	function scrollbar(divob)

	{

	     this.obj1= document.getElementById(divob);

	     this.arleft=getElementsByClass(this.obj1,'img','arrow-left');

		 this.arright=getElementsByClass(this.obj1,'img','arrow-right');

		 this.bar=getElementsByClass(this.obj1,'img','bar');

		 this.bar.parent=this;

		 this.oc = document.getElementById(divob);

	     this.ws = this.bar.offsetWidth;

	     this.bw         = this.bar.width;

		 this.alw        = this.arleft.width - 5;this.alleft=this.arleft.offsetLeft;

		 this.arw        = this.arright.width - 5;this.arleft=this.arright.offsetLeft;

    /* ==== add mouse wheel events ==== */

		if (window.addEventListener)

			this.oc.addEventListener('DOMMouseScroll', function(e) {

				this.parent.scroll(-e.detail);alert("test");

			}, false);

		else this.oc.onmousewheel = function () {

			this.parent.scroll(event.wheelDelta);

		}

	/* ==== 拖动滚动条 ==== */

		this.bar.onmousedown = function (e) {

			if (!e) e = window.event;

			var scl = e.screenX - this.offsetLeft;

			var self = this.parent;

			/* ---- 移动滚动条 ---- */

			this.onmousemove = function (e) {

				if (!e) e = window.event;

				if(e.screenX - scl<self.alleft+self.alw)

				     this.style.left=self.alleft+self.alw;

			     else if(e.screenX - scl>self.arleft-self.ws+5)

				      this.style.left =self.arleft-self.ws+5; 

				 else

				    this.style.left =e.screenX - scl; 

				return false;

			}

			/* ---- 释放滚动条 ---- */

			this.onmouseup = function (e) {

				this.onmousemove = null;

				return false;

			}

			return false;

		}

	}

    scrollbar.prototype={}



return{

    create:function()

	{ 

	    var load=function(){

	    var obj=new scrollbar('show')};

	    /* ---- 窗体的onload事件 ---- */

			addEvent(window, 'load', function () { load(); }); 

	}

}}();

info.create();

</script>



</head>



<body bgcolor="#030000">

		<div id="show" class="scrollbar">

			<img class="track" src="sb.gif" alt="">

			<img class="arrow-left" src="sl.gif" alt="">

			<img class="arrow-right" src="sr.gif" alt="">

			<img class="bar" src="sc.gif" alt="">

		</div>

</body>

</html>
效果图： 如果有感兴趣的可到我的相册中下载图片
pughua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js滚动条操作（整理）
天马3798
12-10 3899
原理：body的scollHeight 如果大于浏览器的innerHeight 则就会出现滚动条。原理：设置div出现滚动条，滚动条的宽度= 元素的offsetWidth-clientWidth。
原生JavaScript实现滚动条效果
10-22
主要介绍了原生JavaScript实现滚动条效果的相关资料,需要的朋友可以参考下
JS实现滚动条
qq_38427709的博客
11-20 5367
JS实现滚动条 在页面中，滚动条的样式虽然可以修改，但是部分属性是无法自己修改和设置，因此通过JS来实现滚动条在自定义滚动条的环境下也是有必要的。 在实现滚动条的过程中，首先需要分析组成部分，主要是内容和滚动两个部分，一般的滚动条主要需要实现的主要是内容的Scroll。 下面贴出代码 <!DOCTYPE html> <html lang="en"> <head>...
JS滑动滚动的n种方式
热门推荐
MyWay
02-22 2万+
window.scroll｜window.scrollBy｜window.scrollTo｜window.scrollByLines｜window.scrollByLines｜element.scrollIntoVIew｜srcollTop | 判断是否某元素的外层可滑动and so on，应有尽有
JavaScript 滚动条
医然
12-01 644
一、禁止滚动条滚动，滚动条不消失 function prohibit_scroll() { //禁止滚动条滚动 var top = $(document).scrollTop(); $(document).on('scroll.unable',function (e) { $(document).scrollTop(top); }) } function remove_pscroll() { //解除禁止滚动条滚动 $(document
js控制滚动条滚动
前端程序猿的博客
03-31 6439
JavaScript 可以通过操作scrollTop在上面的示例中，首先通过获取需要滚动的元素，然后设置scrollTop属性为需要滚动到的位置，即可实现控制滚动条滚动。如果需要平滑滚动，可以使用在上面的示例中，首先获取需要滚动的元素和目标位置，然后设置动画的持续时间。在scrollTo函数中，通过计算当前进度和位置，来实现平滑的滚动效果。在滚动动画未完成时，调用方法来继续滚动，直到动画完成为止。
javascript自定义滚动条实现代码
10-22
主要介绍了javascript自定义滚动条实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现滚动条效果
11-20
本文实例为大家分享了javascript实现滚动条效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
自定义滚动条的实现思路与关键算法
weixin_34006468的博客
05-20 1259
在web开发中，自定义滚动条是个常见的需求，虽然浏览器原生的滚动条很强大并且在大多数场景下表现的很好，但某些时候我们仍然希望修改他的样式，比如变细一点，或者去掉圆角和轨道，又或者隐藏他们。这些都属于自定义行为，本篇文章将介绍自定义滚动条的几种实现思路，并着重讲解最流行的js方案。上图是自定义的效果（视频在转换时降速了，其实非常快）在正文开始前，我们先统一滚动条各个部分的名称。一、实现思路实现自定义...
JS操作滚动条置顶+动画效果
Kuroko's Development Notes
10-14 6558
一、最实用方法： window.scrollTo({ top: 0, behavior: "smooth" }); 调用 scrollTo 方法，并设置 behavior 动画效果。等同于自己手动设置元素的 scrollTop = 0 window.scrollTo 说明： 语法1: 　window.scrollTo(x-coord,y-coord) x-c...
javascript滚动条
01-20
javascrip滚动条，配置简单，使用方便
JS实现的页面自定义滚动条效果
10-23
主要介绍了JS实现的页面自定义滚动条效果,涉及JavaScript结合css设置页面滚动条样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
利用js实现自定义滚动条
个人笔记
03-29 4395
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 530px; margin: 40px aut
模拟滚动条的实现
m0_50855143的博客
09-16 497
冲冲冲 在实现滚动条之前，我们得先理清楚几个概念问题： 属性名称 说明 clientX 点击位置距离当前body可视区域的x坐标 clientY 点击位置距离当前body可视区域的y坐标 screenX 点击位置距离当前电脑屏幕的x坐标 screenY 点击位置距离当前电脑屏幕的y坐标 pageX 对于整个页面来说，包括了被卷去的body部分的宽度 pageY 对于整个页面来说，包括了被卷去的body部分的高度 offsetX
javascript实现自定义滚动条
MichaelAn的博客
07-31 915
在实际项目中，遇到上下滚动条和左右滚动条不在一个DIV内部，所以某些情况下，右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是：自定义滚动条，隐藏原始滚动条。 自定义滚动条 scrollbar.js import React, { Component } from 'react'; import PropTypes from 'prop-types'; import '../css/scrollbar.css'; const propTypes = { eventBus: Pro
ScrollBar(滚动条)的实现尝试
梦起丶的博客
01-30 2436
【写在前面】 【正文开始】 首先，我们思考一下，滚动条负责什么工作： 在一个页面中，当某个元素不足以显示内容时，可以滚动的，用于显示剩下内容的条。 因此，对于一个滚动条，我认为它应该有这些属性： target: any：目标 ( 目标元素，用于滚动其内容 )。 targetWidth & targetHeight: number：目标元素宽高 ( 用于计算滑块宽度以及和后续滚动时的位置计算)。 pressed: bool：是否被按下 ( 用...
JS处理滚动条操作
没有一劳永逸，永远要重新开始，重新进入动荡，重新寻找，重新赢得欢喜。
03-14 3063
一、前言 在网页当中，页面存在滚动条，而你要操作的元素在当前屏幕可见区域之外。那么就需要使用滚动条滚动到该元素处，然后在操作它。 selenium当中的使用execute_script方法执行js语句来实现滚动功能。 二、滚动到元素可视范围 语句：driver.execute_script("arguments[0].scrollIntoView();",el) 其中el为find_element找到元素的对象 所以滚动步骤： （1）通过selenium的查找元素的方法先找到元素 （2）通
Javascript滚动条翻页数据动态加载
HelloWorld, GraspWorld!
12-08 1321
Javascript Ajax滚动条翻页数据动态加载
实现一个简单的滚动条
dalixux的专栏
10-23 1879
bones 没有自带一个滚动条，主要是考虑到滚动条的样式非常多变，可以看下qq系列的滚动条 QQ新闻里的滚动条，如下 异于通常的windows风格滚动条 QQ电脑管家 典型的移动平台风格 再看下QQ聊天框的 类似于windows风格但垂直滚动条两边多了一个直接到顶部和底部的响应区域 由于滚动条如此多变想提供一个内置的并且美工设计都能认可的滚动条非常困难，相比与内置，能让用户
JavaScript 实现滚动条水平滚动
最新发布
04-22
你可以使用CSS样式来实现水平滚动条，而不必使用JavaScript。例如： ``` div { overflow-x: scroll; /* 水平滚动条 */ white-space: nowrap; /* 文本不换行 */ } ``` 或者，如果您想要一个自定义的水平滚动条，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值