因项目需要，实现超出的内容可以左右滚动。未限制实现方法，在查阅资料的情况下找到两种方法可以满足。
方法一： 使用鼠标拖动内容进行滚动
具体实现：
通过mousedown、mousemove、mouseup结合，改变定位的left属性实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style> body{ position: relative; margin:0; padding:0; width:100%; height: 1000px; } #box{ height: 50px; width:200px; position: absolute; left:50%; top:50%; margin-left:-200px; margin-top:-200px; background: #CDCDCD; } #small-box{ height: 50px; width:50px; position: absolute; left:0; top:0; background: #FF66CC; cursor:move ; opacity: 0.7; } </style>
</head>
<body>
<div id="box">
<div id="small-box"></div>
</div>
<script> var box=$("#small-box"); var body=$('body'); var index=0; var x1; box.mousedown(function(){ index=1; //鼠标按下才能触发onmousemove方法 var x=event.clientX; //鼠标点击的坐标值，x var left= this.style.left; left=left.substr(0,left.length-2); //去掉px x1=parseInt(x-left); }); box.mousemove(function(){ if(index===1){ this.style.left=event.clientX-x1+'px'; if(this.style.left.substr(0,this.style.left.length-2)<0){ this.style.left=0; }; if(this.style.left.substr(0,this.style.left.length-2)>150){ this.style.left='150px'; }; } }); box.mouseup(function(){ index=0; }); body.mouseup(function(){ index=0; }); </script>
</body>
</html>
相关链接：
https://blog.csdn.net/rovast/article/details/79872111
https://blog.csdn.net/llllvvv/article/details/79928707
结果：未实现。当前实例中没有使用定位
方法二：使用鼠标滚轮代替滚动条滚动
具体实现：
通过mousewheel事件，改变scrollLeft滚动条到最左边的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> body,html{ position: relative; margin:0; padding:0; width:100%; height: 100%; } #box{ height: 50px; width:300px; position: absolute; left:50%; top:50%; transform: translate(-50%); background: #CDCDCD; overflow: hidden; } #small-box{ white-space: nowrap; } </style>
</head>
<body>
<div id="box">
<div id="small-box">内容溢出1内容溢出2内容溢出3内容溢出4内容溢出5内容溢出6内容溢出7内容溢出8内容溢出9内容溢出10内容溢出11</div>
</div>
<script> let box = document.querySelector("#box") // 由于不同的浏览器所兼容的函数不同，所以需要首先判断浏览器类型，再按照不同浏览器写不同的函数 let explorer =navigator.userAgent; let isIE = navigator.userAgent.match(/MSIE (\d)/i); isIE = isIE ? isIE[1] : undefined; if (isIE < 9) { //传统浏览器使用MouseWheel事件 container.attachEvent("onmousewheel", function (e) { //计算鼠标滚轮滚动的距离 //一格3行，每行40像素 let v = e.wheelDelta / 2; container.scrollLeft += v; //阻止浏览器默认方法 return false; }) } if(explorer.indexOf("Firefox") >= 0){ box.addEventListener("DOMMouseScroll",function(){ //计算鼠标滚轮滚动的距离 box.scrollLeft += event.detail * 40; //阻止浏览器默认方法 event.preventDefault(); }, false) }else{ box.addEventListener("mousewheel",function(){ //计算鼠标滚轮滚动的距离 let v = -event.wheelDelta / 2; box.scrollLeft += v; //阻止浏览器默认方法 event.preventDefault(); }, false) } </script>
</body>
</html>
相关链接：
https://blog.csdn.net/chenyinquan9211/article/details/80603721
结果：实现
