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

<!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. thinkphp5的控制器调用自身模块和调用其他模块的方法

    以user为例,调用user.php的get_number()方法 一.不管是调用自身模块还是其他模块app\model\User.php写法不变 <?php namespace app\ind ...

  2. Qt编写自定义控件15-百分比仪表盘

    前言 百分比仪表盘,主要的应用场景是展示销售完成率.产品合格率等,也可以作为一个进度百分比展示,可以独立设置对应的标题文字,标题文字的颜色和整体的颜色都可以单独设置,建议设置成统一的风格,这样会显得更 ...

  3. LNK2019 无法解析的外部符号 该符号在函数 _main 中被引用

    学习严蔚敏的数据结构,使用vc6新建项目,文件名分别如下: SequenceStack.cpp SequenceStack.h Status.h TestCase.c 报错如下: xilink6: e ...

  4. k-means聚类分析范例程序

    K-Means聚类算法原理参考以下链接: https://www.cnblogs.com/pinard/p/6164214.html 2. 传统K-Means算法流程 在上一节我们对K-Means的原 ...

  5. v-on可以监听多个方法吗？

    原文地址 v-on可以监听多个方法 <template> <div class="about"> <button @click="mycli ...

  6. 【18.065】Lecture2

    由于这一课的教材放出来了,所以直接将整个pdf放上来.   

  7. smoothscroll

    smoothscroll是一款jQuery插件,可以平滑地滚动到指定的地方. 可以解决chrome锚点失效的问题. 官方网站 http://iamdustan.com/smoothscroll/ gi ...

  8. mysq的慢查询日志

    MySQL 慢查询日志是排查问题 SQL 语句,以及检查当前 MySQL 性能的一个重要功能. 查看是否开启慢查询功能: mysql> show variables like 'slow_que ...

  9. PHP抽奖代码。亲测可用

    $prize_arr = array( '0' => array('id' => 1, 'title' => 'iphone5s', 'v' => 5), '1' => ...

  10. Highest Frequency Letters

    Given a list of strings, output the most frequent characters that are in the same group as the lette ...