夏日博客

A-A+

Jquery+css实现滚动条定位效果

2016年01月12日 前端设计 暂无评论 阅读 5 views 次

滚动条定位效果其实就是指定的内容定位在指定的范围之内了，这种效果我们可以通过css与javascript来实现了，下面一起来看一个Jquery+css实现滚动条定位效果制作的全过程，具体如下,这是在P项目碰到的一个功能实现，我姑且把它称为滚动条定位。

假设有一个这样的列表组件U，当我点击item7时,U会产生scrollTop值,同时U会被重新渲染。当我刷新页面时或者点击item5，scrollTop会自动变为0(点击item或刷新页面,U均会被重新渲染),而要实现的功能是刷新页面或点击当前可是范围内的其它item时，此组件仍维持当前的状态（scrollTop的值不改变），这需要维护scrollTop值，对滚动条定位。
假设index.js输出的页面的HTML结构是酱紫的：

  1. <div class = "box">   
  2.     <ul class='ul'>  
  3.         <li>item1</li>  
  4.         <li>item2</li>  
  5.         <li>item3</li>  
  6.         <li>item4</li>  
  7.         <li>item5</li>  
  8.         <li>item6</li>  
  9.         <li>item7</li>  
  10.         <li>item8</li>  
  11.         <li>item9</li>  
  12.         <li>item10</li>  
  13.         <li>item11</li>  
  14.         <li>item12</li>  
  15.     </ul>  
  16. </div>  

因为要维护scrollTop值，我会建立一个scroll.js:

  1. var scrollTop = {top:0}  
  2. module.exports = extendObj({}, {  
  3.     setScrollTop: function(navTop){  
  4.         scrollTop = navTop;  
  5.     },  
  6.     getScrollTop: function(){  
  7.         return scrollTop;  
  8.     }  
  9. });  

当点击item而组件U都会被重新渲染，界面会跟初始化一样,这样，就要记录之前点击的item。item.js代码如下:

  1. var curItem = {id:0};  
  2.    
  3. module.exports = extendObj({}, {  
  4.    
  5.     setItem: function(item){  
  6.    
  7.         curItem = item;  
  8.    
  9.     },  
  10.    
  11.     getItem: function(){  
  12.    
  13.         return curItem;  
  14.    
  15.     }  
  16.    
  17. });  

当点击item时，就会更新curItem:

  1. var curItem = require('./item');  
  2.    
  3. $(function(){  
  4.    
  5.  $('.ul').on('click','li',function(){  
  6.    
  7.      $(this).addClass('active').siblings().removeClass('active');  
  8.    
  9.      curItem.setItem({id:$(this).index()});  
  10.    
  11.     })  
  12.    
  13. })  

当然，还要监听U组件的scroll事件，去更新scrollTop值(b.js):

  1. var navTop = require('./scroll.js');  
  2.    
  3. $('.ul').scroll(function(){  
  4.    
  5.     var scrollTop = $(this).scrollTop();  
  6.    
  7.     navTop.setScrollTop({top: scrollTop});  
  8.    
  9. });  

这样，当点击在当前可视范围内的item，scrollTop值就不会变：

  1. $('.ul').scrollTop(navTop.getScrollTop().top);  

当再次触发U组件的scroll事件时，b.js会更新scrollTop值。但是刷新页面时，所有数据都被初始化了，但在初始化页面中，能根据刷新前最后点击item的id来设置scrollTop：

  1. //在index.js中  
  2.    
  3. var curItemId = require('./item').getItem().id;  
  4.    
  5. var navHeight = $('.ul').height();  
  6.    
  7. $('.ul').children('li').each(function(){  
  8.    
  9.     if(curItemId === $(this).index()){  
  10.    
  11.         $('.ul').scrollTop($(this).position().top - navHeight);  
  12.    
  13.     }  
  14.    
  15. });  

这样，刷新页面后，U组件的状态仍是刷新之前的状态。需要注意的是，position()是根据最近定位的父元素计算距离的，所以U组件应该相对定位或者绝对定位：

  1. .box{  
  2.    
  3.     margin: 100px auto;  
  4.    
  5.     width: 200px;  
  6.    
  7.     background-color: #f1f1f1;  
  8.    
  9.     border: 0.5px solid #d3d7da;  
  10.    
  11. }  
  12.    
  13. .ul{  
  14.    
  15.     height: 300px;  
  16.    
  17.     margin-top: 12px;  
  18.    
  19.     margin-left: -2px;  
  20.    
  21.     overflow-y: auto;  
  22.    
  23.     overflow-x: hidden;  
  24.    
  25.     position:realtive  
  26.    
  27. }  
  28.    
  29. .ul li{  
  30.    
  31.     list-style: none;  
  32.    
  33.     position: relative;  
  34.    
  35.     left: -40px;  
  36.    
  37.     width: 184px;  
  38.    
  39.     height: 32px;  
  40.    
  41.     color: #323232;  
  42.    
  43.     padding: 7px;  
  44.    
  45.     cursor: pointer;  
  46.    
  47.     padding-top: 20px;  
  48.    
  49. }  
  50.    
  51. .ul li:hover{  
  52.    
  53.     border-left:2px solid #0087ee  
  54.    
  55. }  
  56.    
  57. .ul::-webkit-scrollbar{  
  58.    
  59.     width: 5px;  
  60.    
  61.     height: initial;  
  62.    
  63. }  
  64.    
  65. .ul::-webkit-scrollbar-track-piece{  
  66.    
  67.     background-color: #f2f2f2;  
  68.    
  69. }  
  70.    
  71. .ul::-webkit-scrollbar-thumb{  
  72.    
  73.     background-color: #c3ccd5;  
  74.    
  75.     border-radius: 20px;  
  76.    
  77. }  
  78.    
  79. .active{  
  80.    
  81.     border-left:2px solid #0087ee  
  82.    
  83. }  
标签：

给我留言