实现超出的内容可以左右滚动

因项目需要,实现超出的内容可以左右滚动。未限制实现方法,在查阅资料的情况下找到两种方法可以满足。

方法一: 使用鼠标拖动内容进行滚动

具体实现:
通过mousedown、mousemove、mouseup结合,改变定位的left属性实现。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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滚动条到最左边的距离


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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内容溢出11div>
  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

结果:实现

你可能感兴趣的:(js)