美文网首页
鼠标上下滚动内容左右滚动不显示滚动条

鼠标上下滚动内容左右滚动不显示滚动条

作者: 七彩霞光_d533 | 来源:发表于2018-05-18 15:23 被阅读0次
例:
001.jpg
002.jpg

页面有用第三方插件build.js,点击下载

 <script src="jquery-1.11.0.min.js"></script>
 <script src="build.js"></script> 

<div class="systemSelect" style="margin-top:100px;margin-left:100px;">
    <div class="scrollNavBox">
      <div class="scrollUnitNav" id="scrollUnitNav">
        <ul id="navbar_box">
          <li id="ecaa6f23_49ce_4103_873d_8911c43f3c24" class="navbar_item navbar_item_enable li_element">
            <a>总部(中国)</a>
          </li>
          <li id="66efb6c1_6c6f_43e8_b296_3837f12111e9" class="navbar_item navbar_item_enable li_element">
            <a>山东省</a>
          </li>
          <li id="5c874cf0_346a_4ca0_a255_35e6eb3c739a" class="navbar_item navbar_item_enable li_element">
            <a>德州市</a>
          </li>
          <li id="95ea3029_721c_451c_93d0_268f95ef88ec" class="navbar_item navbar_item_enable li_element">
            <a>夏津县</a>
          </li>
          <li id="a8335dc0_f16d_46a6_8a34_32f3e03f9485" class="navbar_item navbar_item_enable">
            <a>后屯乡镇</a>
          </li>
        </ul>
      </div>
    </div>
</div>

*{
      list-style: none;
      padding: 0;
      margin: 0;
      box-sizing:border-box;
      font-size: 14px;
      color: #333;
    }
    .systemSelect{
      width: 340px;
      height: 38px;
      position: relative;
      padding-top: 8px;
      padding-left: 4px;
      border:1px solid #32b16c;
      float: left;
    }
    .scrollNavBox{
      height: 20px;
      width: 100%;
      overflow: hidden;
    }
    .scrollUnitNav{
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .scrollUnitNav ul{
      width: 560px;
      min-width: 100%;
    }
    .scrollUnitNav ul li{
      float: left;
      margin: 0px 2px 0px 0px;
      padding: 0px 0px;
    }
    .scrollUnitNav ul li:after{
      content: "/";
      color: #ccc;
      background: none;
      vertical-align: top;
      display: inline-block;
      width: 10px;
      height: 14px;
      margin-left: 3px;
    }
    .scrollUnitNav ul li a{
      padding: 2px 4px;
      border-radius: 2px;
      border: none;
      color: #333;
      margin: 1px;
      cursor: pointer;
    }
window.onload = function(){

  // 设置nav导航滚动+++++++++++++++++++
  var horwheel = require('horwheel'),
      view = document.getElementById('scrollUnitNav');
      horwheel(view,120);

}

相关文章

网友评论

      本文标题:鼠标上下滚动内容左右滚动不显示滚动条

      本文链接:https://www.haomeiwen.com/subject/kkugdftx.html