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

<!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. 【11】ajax请求后台接口数据与返回值处理js写法

    $.ajax({ url: "/test.php",//后台提供的接口 type: "post",   //请求方式是post data:{"type ...

  2. 扩展：Zero Copy

  3. Python实现计算圆周率π的值到任意位的方法示例

    Python实现计算圆周率π的值到任意位的方法示例 本文实例讲述了Python实现计算圆周率π的值到任意位的方法.分享给大家供大家参考,具体如下: 一.需求分析 输入想要计算到小数点后的位数,计算圆周 ...

  4. —Entity Framework实例详解

    Entity Framework Code First的默认行为是使用一系列约定将POCO类映射到表.然而,有时候,不能也不想遵循这些约定,那就需要重写它们.重写默认约定有两种方式:Data Anno ...

  5. JavaScript（6）—— 返回特征数字

    案例要求 根据业务情况,要把核心的东西变成一个模块便于复用,慢慢沉淀后,能够更快更高效地编程. 业务核心算法: /* 数字检测 @return 返回2,能被3和7整除 返回1,能够被3整除 返回0,不 ...

  6. eclipse上新建Maven项目报错及解决

    Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 or one of ...

  7. 配置cinder-backup服务使用ceph作为后端存储

    在ceph监视器上执行 CINDER_PASSWD='cinder1234!'controllerHost='controller'RABBIT_PASSWD='0penstackRMQ' 1.创建p ...

  8. 【Abode Air程序开发】打包并导出

    打包并导出 将移动设备应用程序打包并导出到在线商店 导出用于发行的 Android APK 包 导出用于发行的 Apple iOS 包 使用命令行进行创建.测试和部署 使用 mxmlc 编译手机应用程 ...

  9. JS、JQUERY 获取浏览器和屏幕各种高度宽度

    好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...

  10. 强大的strace命令用法详解

    文章转自: https://www.linuxidc.com/Linux/2018-01/150654.htm strace是什么? 按照strace官网的描述, strace是一个可用于诊断.调试和 ...