css样式支持左右滑动要点

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

div 包含 ul ，ul 包含 li

div宽度固定，ul 宽度随着li的可以无限增加，li 左右滑动的最小容器。

div 样式position:relative;width:xxpx;height:xxpx;

ul 样式 list-style: none; white-space: nowrap;position: absolute; top: 0; left: 0;margin: 0px; padding: 0px;

li 样式 display: inline-block; vertical-align: top;list-style: none;white-space: nowrap;

li元素水平有间隙，需要在其父元素上加配置:font-size:0

滚动设置：

 $(".mini-docker-right-array").click(function(event){

             var p =  $(this).parent().parent();

             var appToScroll = p.find(".app-to-scroll");

             var ul = p.find(".node-scroll-container");

             var ulLeft = parseInt(ul.css("left"));

             var left = ulLeft;

             if(ul.width() + ul.position().left > appToScroll.width()){

                 left = ulLeft - appToScroll.width();

             }

             ul.animate({

                 "left": left + "px"

             });

             event.stopPropagation();

         })

         $(".imagebutton-left-botton").click(function(event){

             var p =  $(this).parent().parent();

             var appToScroll = p.find(".app-to-scroll");

             var ul = p.find(".node-scroll-container");

             var ulLeft = parseInt(ul.css("left"));

             var left = ulLeft = appToScroll.width();

             if(left > 0){

                 left = 0;

             }

             ul.animate({

                 "left": left + "px"

             });

             event.stopPropagation();

         })