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

<!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. php如何开启gd2扩展

    extension=php_gd2.dll 找到php的配置文件php.ini,搜索extension=php_gd2.dll,去掉前面的分号即可:如果没有直接添加这种情况适合于windows系统和编 ...

  2. an extra named object property

    Grunt supports the ability to split each task configuration into several separate configurations all ...

  3. python中pip的安装与更新

    python -m pip install --upgrade pip --force-reinstall

  4. Java中的字节，字符与编码，解码

    ASCII编码 ASCII码主要是为了表示英文字符而设计的,ASCII码一共规定了128个字符的编码(0x00-0x7F),只占用了一个字节的后面7位,最前面的1位统一规定为0. ISO-8859-1 ...

  5. Flask之上下文管理机制

    前引 在了解flask上下文管理机制之前,先来一波必知必会的知识点. 面向对象双下方法 首先,先来聊一聊面向对象中的一些特殊的双下划线方法,比如__call__.__getattr__系列.__get ...

  6. RobotFramework的安装

    Robot Framework自动化测试框架+可视化编辑工具RIDE+Selenium2这是规范的webAPI. 一通过下载安装包安装 1)RF 框架是基于 Python 语言的,所以一定要有 Pyt ...

  7. linux无密钥登陆

    1.在用户目录下执行命令 ssh-keygen -t rsa 一路回车: 2.在当前用户目录下,进入.ssh文件夹(.ssh文件夹为隐藏文件夹,直接进去即可). 在.ssh文件夹下执行命令: cat ...

  8. ASP.NET Core 入门笔记7，ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  9. 阿里P8架构师谈：Restful、SOAP、RPC、SOA、微服务之间的区别（转载）

    转载来源:https://youzhixueyuan.com/the-difference-between-restful-soap-rpc-soa-and-micro-service.html 内容 ...

  10. C学习笔记-字符串的格式化输出和输入

    存储方式 字符串是内存中一段连续的char空间,以'\0'结尾 字符串就是0结尾的连续char的内存 '\0' <=> 0 <=> null printf函数,putchar函 ...