js实现侧边栏滚动+网页中的滚轮分离+固定定位

最新推荐文章于 2022-07-16 08:33:31 发布
转载最新推荐文章于 2022-07-16 08:33:31 发布 · 431 阅读
2 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/hojun/p/6497496.html
文章标签：
#前端 #ruby #javascript #ViewUI
效果如下：
代码：
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
      li.active .sidebar-icon-dashboard {
          background-position: -18px 0px;
      }
      #app-first-sidebar nav li .sidebar-icon-dashboard {
          background-position: 0px 0px;
      }
      #app-first-sidebar nav li .sidebar-icon {
          position: relative;
          top: -1px;
          display: inline-block;
          width: 18px;
          height: 18px;
          vertical-align: middle;
          background: url(/v2/image/www/sidebar/sidebar-icon-20160530.png) no-repeat;
      }
      #app-first-sidebar {
          position: fixed;
          top: 0px;
          bottom: 0;
          left: 0;
          width: 90px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          background: #444;
      }
      #app-first-sidebar .team-logo-wrap {
          display: block;
          width: 90px;
          height: 63px;
          overflow: hidden;
      }
      #app-first-sidebar nav li.active a {
          color: #333;
      }
      #app-first-sidebar nav li a {
          color: #CACACA;
          display: block;
          padding-left: 18px;
      }
      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font: inherit;
          font-size: 100%;
          vertical-align: baseline;
      }
      a {
          text-decoration: none;
          cursor: pointer;
      }
      #app-first-sidebar nav {
          padding: 0 0 60px 0;
          width: 90px;
      }
      ol, ul {
          list-style: none;
      }
      #app-first-sidebar nav li {
          font-size: 14px;
          height: 36px;
          line-height: 36px;
          margin-bottom: 14px;
          cursor: pointer;
      }
      #app-first-sidebar .team-logo {
          margin: 15px auto 0;
          width: 32px;
          height: 32px;
          border-radius: 16px;
          background-size: cover;
          background-position: 50% 50%;
          background-color: #fff;
      }
      #app-first-sidebar nav li.active {
          background: #F8F8F8;
      }
      #app-first-sidebar nav li.active {
          background: #F8F8F8;
      }
      #app-first-sidebar nav li:hover a {
          color: #fff;
      }
      li:hover {
          background: #666;
      }
  </style>
</head>
<body>
  <div id="app-first-sidebar">
    <div id="wheelDelta" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
      <a class="team-logo-wrap" href="">
        <div class="team-logo" style="background-image: url(http://leanote.com/public/upload/585/57a53b97ab644135ea03f548/images/logo/ef626a3726ca878ec92f6163274c895f.png)">
        </div>
      </a>
      <nav>
        <ul class="clearfix">
          <li class="active">
            <a href="">
              <i class="sidebar-icon sidebar-icon-dashboard"></i>
            哈哈
            </a>
          </li>
          <li>
            <a href="">
              <i class="sidebar-icon sidebar-icon-shop"></i>
              哈哈
            </a>
          </li>
          <li class="js-guide-goods ">
            <a href="l">
              <i class="sidebar-icon sidebar-icon-goods"></i>
              哈哈
            </a>
          </li>
          <li class="js-guide-trade ">
            <a href="trade_dashboard.html">
              <i class="sidebar-icon sidebar-icon-order"></i>
              哈哈
            </a>
          </li>
          <li class="js-guide-fans ">
            <a href="">
              <i class="sidebar-icon sidebar-icon-fans"></i>
              哈哈
            </a>
          </li>
          <li>
            <a href="">
              <i class="sidebar-icon sidebar-icon-stat"></i>
              哈哈
            </a>
          </li>
          <li>
            <a href="">
              <i class="sidebar-icon sidebar-icon-asset"></i>
              哈哈
            </a>
          </li>
          <li style="margin-top: 44px;">
            <a href="">
              <i class="sidebar-icon sidebar-icon-app"></i>
              哈哈
            </a>
          </li>
          <li class="js-guide-setting ">
            <a href="">
              <i class="sidebar-icon sidebar-icon-setting"></i>
              哈哈
            </a>
          </li>
          <li style="margin-top: 44px;">
            <a href="" target="_blank">
              <i class="sidebar-icon sidebar-icon-youzan"></i>
              呵呵
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>1111111111111111111
  <br>    
</body>
</html>
<script type="text/javascript"> 
  var temp = 0;
  var div = document.getElementById("wheelDelta");
  div.onmouseover=function(event){
      div.onmousewheel=function(e){ 
          e=e || window.event; 
          var t1=document.getElementById("wheelDelta"); 
          document.onmousewheel=function (){return false};
          if(e.wheelDelta){ 
              t1.value = e.wheelDelta;
              if(t1.value<0){
                temp -= 50;
                if(temp<-100) temp=-100;
                t1.setAttribute('style', 'transform: translate(0px, '+ temp +'px) translateZ(0px);');
              }else{
                temp += 50;
                if(temp>0) temp=0;
                t1.setAttribute('style', 'transform: translate(0px, '+ temp +'px) translateZ(0px);');
              }
          }
      } 
  }
  div.onmouseout =function(event){
      document.onmousewheel = function(event) {
          event = event || window.event;
      };
  }
</script>
转载于:https://www.cnblogs.com/hojun/p/6497496.html