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

<!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. [CDH] Acquire data: Flume and Kafka

    Flume 基本概念 一.是什么 Ref: http://flume.apache.org/ 数据源获取:Flume.Google Refine.Needlebase.ScraperWiki.Bloo ...

  2. vi/vim命令使用

    首先讲一些vim和vi的区别: 它们都是多模式编辑器,不同的是vim是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面.vim的这些优势主要体现在以下几个方面:1.多级撤消我们知道 ...

  3. 一次神奇的JVM调优

    老张接个新项目,项目可是不小,好多模块.使用Intellij import new project, 结果卡在writing class中,而且mac的风扇一直转,像是要变成直升机起飞. 等啊等,in ...

  4. Java中验证编码格式的一种方法

    package forlittlecatty; import java.io.File; import java.io.FileInputStream; import java.io.IOExcept ...

  5. C# 3Des加密解密

      第三方的加密规则约定:加密经过3DES加密后的Base64 编码 最近在对接一个第三方接口,请求参数和响应参数全采用3des加密规则,由于我是用.NET对接的,而第三方是Java开发的,所以两种程 ...

  6. sql server 备份语句

    1.BACKUP DATABASE your_database TO DISK = 'diff.bak'with DIFFERENTIAL #差异备份,仅备份数据2.BACKUP DATABASE y ...

  7. AssetBundle资源打包与加载

    AssetBundle资源打包  1.AssetLabels资源标签 文件名:资源打包成AssetBundle后的文件名,类似于压缩包的名字 后缀:自定义 文件名和后缀名都是小写格式(大写会自动转为小 ...

  8. 【CodeForces - 707B】Bakery（思维水题）

    Bakery Descriptions 玛莎想在从1到n的n个城市中开一家自己的面包店,在其中一个城市烘焙松饼. 为了在她的面包房烘焙松饼,玛莎需要从一些储存的地方建立面粉供应.只有k个仓库,位于不同 ...

  9. C++学习笔记-继承中的构造与析构

    C++存在构造函数与析构函数,继承中也存在构造和析构函数.继承中的构造和析构函数与普通的构造析构有细微差别. 赋值兼容性原则 #include "iostream" using n ...

  10. 二分查找算法C++实现

    /************************************************************************* > File Name: binary_se ...