这个也是我百度到的，但是忘记保存连接了，现在把代码贴上来，有需要的可以参考一下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			*{padding: 0;margin: 0;list-style: none;}

			#box{width: 792px;height: 300px;border: 1px solid #ddd;margin: 100px auto;position: relative;overflow: hidden;}

			#box_top{position: absolute;left:0;top:20px;}

			#box_top li{float: left; white-space: nowrap;}

			#box_bottom{width: 100%;position: absolute;left: 0;bottom: 0;background: #e8e8e8;height: 25px;}

			#mask{height: 25px;background: orangered;border-radius: 12px;position: absolute;left: 0;top: 0;cursor: pointer;}

			/*#box_top li img{

				-webkit-user-select: none;

				-moz-user-select: none;

				-ms-user-select: none;

				user-select: none;

			}*/

		</style>

	</head>

	<body>

		<div id="box">

			<ul id="box_top">

				<li>PingWest品玩7月10讯，根据路透社报道，美国商务部长威尔伯·罗斯（Wilbur Ross）表示，美国商务部将在不危及美国国家安全的情况下，向华为的美国供应商发放许可证。罗斯表示，华为仍在实体清单中，并且禁止的项目范围也不会改变，这意味着申请许可证可能会被拒绝，但此次打开了申请许可证的大门。报道称，行业观察人士表示目前对实际政策的范围以及哪些类型将被批准或被拒绝尚不清楚，只能通过提交申请来确定。</li>

			</ul>

			<div id="box_bottom">

				<span id="mask"></span>

			</div>

		</div>

		<script type="text/javascript">

			window.onload = function(){

				var box = document.getElementById("box")

				var box_top = document.getElementById("box_top")

				var box_bottom = document.getElementById("box_bottom")

				var mask = document.getElementById("mask")

	//			获取ul的总宽度

				var li= box_top.children[0]

				console.log(li.offsetWidth)

				// var liL = box_top.children[0].offsetWidth * box_top.children.length

				var liL = box_top.children[0].offsetWidth

				box_top.style.width = liL + "px"

	//			滚动条的长度 = (盒子的宽度 / 内容的宽度)*盒子的宽度

				var mask_len = (box.offsetWidth / box_top.offsetWidth)*box.offsetWidth

				mask.style.width = mask_len + "px"

	//			鼠标操作

				mask.onmousedown = function(e){

					e = e || event

					var beginX = e.clientX - mask.offsetLeft

					document.onmousemove = function(e){

						e = e || event

						var endX = e.clientX - beginX

						if(endX < 0){

							endX = 0

						}

						if(endX >= box.offsetWidth - mask.offsetWidth){

							endX = box.offsetWidth - mask.offsetWidth

						}

						mask.style.left = endX + "px"

	//					内容走的距离 = （内容的长度 - 盒子的长度 ）/ （盒子的长度 - 滚动条的长度）*滚动条走的距离

						var contentL = (box_top.offsetWidth - box.offsetWidth)/(box.offsetWidth - mask.offsetWidth)*endX

						box_top.style.left = -contentL + "px"

						window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()//防止拖动时选中内容

					}

					document.onmouseup= function(e){

						e = e || event

						document.onmousemove = null

					}

				}

			}

		</script>

	</body>

</html>

　　

js div模拟水平滚动条的更多相关文章

  1. H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  2. js控制div内的滚动条的位置

    通过div的scrollTop变动控制垂直滚动条位置. 通过div的scrollLeft变动控制水平滚动条位置. 示例: <body> //d1是外层div,带滚动条 <div id ...

  3. Python3+Selenium3+webdriver学习笔记12（js操作应用：滚动条 日历 内嵌div）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记12(js操作应用:滚动条 日历 内嵌div)'''from ...

  4. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  5. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  6. div模拟textarea在ios下不兼容的问题解决

    今天发现一个好东西,赶紧记下来,我在用textarea的时候,想要自适应高度,这样就不会出现滚动条.网上找了很多,都是用div模拟的,但是好扯淡,div模拟的在ios下不能聚焦并且不能输入.真坑... ...

  7. Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll

    基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...

  8. div 模拟<select>事件

    IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...

  9. jquery双向列表选择器DIV模拟版

    前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:htt ...

随机推荐

  1. CSS层叠样式表的层叠是什么意思

    层叠的意思就是“继承”.“权重”.“覆盖”,通过良好的层级命名更好的实现效果,更少的代码,更多的功能,下面为大家详细介绍下,感兴趣的朋友不要错过   解答一: 层叠指的是样式的优先级,当产生冲突时以优 ...

  2. vector subscript out of range

    报这个错时会弹出一个窗口,貌似内存溢出,这是什么由于vector存放的数据超出了vector的大小所造成的. 解决方法如下: 在Vector<string> vector之后,不能直接通过 ...

  3. WebServer_参考

    参考:http://blog.csdn.net/cjsafty/article/details/9323425 这里顺便记录下几个页面      lajphttps://code.google.com ...

  4. java使用nio（Paths,Files）遍历文件目录,转成java.io.File

    String directory = "C:\\Users\\Administrator\\AppData\\Local\\Temp\\8ad088a2-0bb3-41dc-89d9-2c5 ...

  5. js-jsTree

    依赖:jquery.jsjstree.js//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css 备注:绑 ...

  6. JAVA_day1_变量和常量

    JAVA变量和常量 一.JAVA中的关键字 注:关键字区分大小写,Try不是关键字而try则是. 二.JAVA标识符 1.标识符:标识符就是用于给 Java 程序中变量.类.方法等命名的符号. 2.标 ...

  7. linux 网络相关

    1. 配bond 模式 将eth0 和 eth1 绑定 ,master 为bond2 ,直接上文件 eth0   和 eth1 , 类似,如下 ,关键点  MASTER and  SLAVE TYPE ...

  8. tf.metrics.sparse_average_precision_at_k 和 tf.metrics.precision_at_k的自己理解

    tensorflow最大的问题就是大家都讲算法,不讲解用法,API文档又全是英文的,看起来好吃力,理解又不到位.当然给数学博士看的话,就没问题的. 最近看了一系列非常不错的文章,做一下记录: http ...

  9. 【转】C# DataTable 导出 Excel 进阶 多行表头、合并单元格、中文文件名乱码

    本文原创地址:http://blog.csdn.net/ranbolwb/article/details/8083983 ,转载请保留本行. 本例子是上一篇 DataTable 导出 Excel 的进 ...

  10. 【计算机视觉】Vibe Vibe+

    ViBe是一种像素级的背景建模.前景检测算法,该算法主要不同之处是背景模型的更新策略,随机选择需要替换的像素的样本,随机选择邻域像素进行更新.在无法确定像素变化的模型时,随机的更新策略,在一定程度上可 ...