三叉戟之橫向自定義滾動

weixin_34007291發表於2018-10-03
5518628-299c67ad425d1488.jpg

需求：
橫向自定義滾動，帶滾動條，滑鼠滾輪也可觸發；
單個元素滾動，滾動過程中顯示兩邊被隱藏元素個數

5518628-fc807603afa5c0d5.png

程式碼：
CSS：

html,body{
  margin: 0 auto;
}
#all{
  width: 600px;
  height: 175px;
  border: 1px red solid;
  margin: 0 auto;
  margin-top: 10%;
  position: relative;
}
#main{
  width: 600px;
  height: 175px;
  margin: 0 auto;
  /*overflow: auto;*/
  overflow: hidden;
  position: relative;
}

#inner{
  width: 1950px;
  height: 150px;
  /*overflow: auto;*/
}

#inner div{
  float: left;
  background: aqua;
  width:150px;
  height: 150px;
  border-radius:50% ;
  text-align: center;
  line-height: 150px;
}
#main1{
  background: aqua;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  line-height: 150px;
  position: absolute;
  z-index: 1;
  display: none;
}
#number1{
  position: absolute;
  width:40px;
  height:40px;
  background-color: yellow;
  top:0;
  right:0;
  border-radius: 50%;
}
#number1Inner{
  position: absolute;
  top: -54px;
  right: 11px
}
#main2{
  float: left;
  background: aqua;
  width:150px;
  height: 150px;
  border-radius:50% ;
  text-align: center;
  line-height: 150px;
  position: absolute;
  z-index: 1;
  right: 0;
  top:0;
}
#number2{
  position: absolute;
  width:40px;
  height:40px;
  background-color: yellow;
  top:0;
  right:0;
  border-radius: 50%;
}
#number2Inner{
  position: absolute;
  top: -54px;
  right: 11px
}

#scroll{
  width: 600px;
  height: 20px;
  background-color: antiquewhite;
  position: absolute;
  bottom: 0;
}

#scrollInner{
  width: 0px;
  height: 20px;
  background-color: blue;
}

JS：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>橫向自定義滾動</title>
  <link rel="stylesheet" href="橫向自定義滾動.css">
</head>
<body>
<div id="all">
<div id="main1">...
  <div id="number1">
    <span id="number1Inner">0</span>
  </div>
</div>
<div id="main">

  <div id="inner">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
  </div>

</div>
<div id="main2">...
  <div id="number2">
    <span id="number2Inner">10</span>
  </div>
</div>
  <div id="scroll">
    <div id="scrollInner"></div>
  </div>
</div>
<script src="../jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
  window.onload=function () {
    document.getElementById("main").onwheel=function(e){
      e.preventDefault()
      this.scrollLeft+=e.wheelDeltaY
      // console.log(this.scrollLeft)
      $("#main1").css("display",this.scrollLeft?"block":"none")
      $("#main2").css("display",this.scrollLeft===1350?"none":"block")
      let x=this.scrollLeft/150*(100/9)
      $("#scrollInner").width(x+"%")
      $("#number1Inner").text(this.scrollLeft/150+1)
      $("#number2Inner").text(11-this.scrollLeft/150-1)
    }
  }
</script>
</body>
</html>

效果圖：

5518628-c673cd2dc71a5d48.gif

（完）

相關文章