Jquery+css實現滾動條定位效果

滾動條定位效果其實就是指定的內容定位在指定的範圍之內了,這種效果我們可以通過css與javascript來實現了,下面一起來看一個Jquery+css實現滾動條定位效果制作的全過程,具體如下。
這是在P專案碰到的一個功能實現,我姑且把它稱爲滾動條定位。
 
假設有一個這樣的列表組件U,當我點擊item7時,U會産生scrollTop值,同時U會被重新渲染。當我刷新頁面時或者點擊item5,scrollTop會自動變爲0(點擊item或刷新頁面,U均會被重新渲染),而要實現的功能是刷新頁面或點擊當前可是範圍內的其它item時,此組件仍維持當前的狀態(scrollTop的值不改變),這需要維護scrollTop值,對滾動條定位。
假設index.js輸出的頁面的HTML結構是醬紫的:
<div class = "box"> 
  <ul class='ul'>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
    <li>item11</li>
    <li>item12</li>
  </ul>
</div>
因爲要維護scrollTop值,我會建立一個scroll.js:
var scrollTop = {top:0}
module.exports = extendObj({}, {
  setScrollTop: function(navTop){
    scrollTop = navTop;
  },
  getScrollTop: function(){
    return scrollTop;
  }
});

當點擊item而組件U都會被重新渲染,界面會跟初始化一樣:

Jquery+css實現滾動條定位效果

這樣,就要記錄之前點擊的item。item.js代碼如下:

var curItem = {id:0};

module.exports = extendObj({}, {

  setItem: function(item){

    curItem = item;

  },

  getItem: function(){

    return curItem;

  }

});

當點擊item時,就會更新curItem:

var curItem = require('./item');

$(function(){

 $('.ul').on('click','li',function(){

   $(this).addClass('active').siblings().removeClass('active');

   curItem.setItem({id:$(this).index()});

  })

})

當然,還要監聽U組件的scroll事件,去更新scrollTop值(b.js):

var navTop = require('./scroll.js');

$('.ul').scroll(function(){

  var scrollTop = $(this).scrollTop();

  navTop.setScrollTop({top: scrollTop});

});

這樣,當點擊在當前可視範圍內的item,scrollTop值就不會變:

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

當再次觸發U組件的scroll事件時,b.js會更新scrollTop值。但是刷新頁面時,所有數據都被初始化了,但在初始化頁面中,能根據刷新前最後點擊item的id來設置scrollTop:

//在index.js中

var curItemId = require('./item').getItem().id;

var navHeight = $('.ul').height();

$('.ul').children('li').each(function(){

  if(curItemId === $(this).index()){

    $('.ul').scrollTop($(this).position().top - navHeight);

  }

});

這樣,刷新頁面後,U組件的狀態仍是刷新之前的狀態。需要注意的是,position()是根據最近定位的父元素計算距離的,所以U組件應該相對定位或者絕對定位:

.box{

  margin: 100px auto;

  width: 200px;

  background-color: #f1f1f1;

  border: 0.5px solid #d3d7da;

}

.ul{

  height: 300px;

  margin-top: 12px;

  margin-left: -2px;

  overflow-y: auto;

  overflow-x: hidden;

  position:realtive

}

.ul li{

  list-style: none;

  position: relative;

  left: -40px;

  width: 184px;

  height: 32px;

  color: #323232;

  padding: 7px;

  cursor: pointer;

  padding-top: 20px;

}

.ul li:hover{

  border-left:2px solid #0087ee

}

.ul::-webkit-scrollbar{

  width: 5px;

  height: initial;

}

.ul::-webkit-scrollbar-track-piece{

  background-color: #f2f2f2;

}

.ul::-webkit-scrollbar-thumb{

  background-color: #c3ccd5;

  border-radius: 20px;

}

.active{

  border-left:2px solid #0087ee

}

更多相關文章
  • CSS overflow:auto滾動條出現時不跳動的解決辦法
    在用 margin: 0 auto 的方式來居中網頁布局時會出現問題:如果網頁出現滾動條時margin: 0 auto主體元素自然會做偏移--跳動産生.當前web屆,絕大多數的頁面間布局都是水平居中布局,主體定個寬度,然後margin: 0 auto的節奏~例如,大淘寶的首頁: 然而,這種布局有一個 ...
  • jquery.ui.dialog 1.81在ie8中出現滾動條失效解決方法var dialog = $("#divdialog").dialog({ autoopen:false ,width:350 ,height:160 ,buttons:{ "確認":f ...
  • 利用CSS實現Family tree族譜效果
    族譜網站在幾年前就接手過一個,但當時使用flash實現的,今天小編來爲各位介紹利用CSS實
  • 提供一個基本的jquery ImageScroll的圖片切換效果,有需要的朋友可以參考一下哦. 代碼如下 (function($){ $.fn.ImageScroll = function(options) { va
  • RollBar插件被開發目的在于代替標准浏覽器的滾動條,使其能被定制化以及完美的配合網站風格,下面我們一起來看看這款插件的例子吧. 現在簡單總結一下,所需要的內容第一步:引入必要的js,(jquery.rollbar
  • jquery中animate和CSS3實現緩動追逐示例
    在jquery中animate方法可以實事效果慢慢載入了,下面我們給各位整理了一個jquery中animate和CSS3實現緩動追逐示例,希望此例子對各位有幫助.CSS3和jquery都可以實現緩動追逐效果,但是考慮到浏覽器的兼容性,建議使用jquery animate方法來實現. 實現效果如下:
  • 以下是本人總結整理的CSS實現垂直居中的5個方法,及優點缺點,我們可以在不同的應用場合采用更加合理的方法垂直居中.方法一這個方法把一些div的顯示方式設置爲表格,因此我們可以使用表格的vertical-alignproperty屬性.<divid="wrapper"> ...
  • 方法其實簡單就是請點擊"插入一行"按鈕,插入最新信息,當出現滾動條時,滾動條將自動保持在底部. 了. 代碼如下 <script type="text/javascript"> function add() { var now = new Date( ...
一周排行
  • Too many open files提示是告訴我們打開的文件太多了,那麽我們怎麽會打開這麽多文件呢,這個linux默認的文件是多少?如何設置文件打開數量,下面我們來看看.昨天,專案的 ElasticSearch 服 ...
  • 本文主要講解db2數據庫遇到故障及效能問題時該去快速診斷定位問題,希望本文對從事db2的同學提供指導和參考 .1.在db2數據庫主機遇到重大故障時我們可以通過db2support收集數據庫診斷日志數據#在可以連接的時
  • 蘋果iPhone6s/plus手機3D Touch的5個使用技巧
    3D Touch的觸控技術,被蘋果稱爲新一代多點觸控技術.其實,就是此前在Apple Wa
  • 前面講過mysql熱備份,下面小編再來給各位同學介紹一下在CENTOS6.3中MYSQL主從數據庫備份配置的方 法,希望此教程 對各位同學會有所幫助哦. MySQL主主互備結構是基于mysql增量日志基礎上的,區別于 ...
  • 本文章來給各位同學介紹一下關于Hibernate含List屬性的持久化類的CRUD操作範例,希望有興趣的朋友進入參考哦.1.hibernate.cfg.xml 代碼如下 <!DOCTYPE hibernate- ...
  • str=str.substring(int beginIndex);截取掉str從首字母起長度爲beginIndex的字符串,將剩余字符串賦值給str:str=str.substring(int beginIndex ...
  • Django和Flask都是Python Web 框架,在我們使用 Django/Flask 開發 wep app時,會用到內建伺服器開發和調試程序,內建伺服器通常都不支持 HTTPS,那麽我們怎測試HTTPS呢?
  • 下面用php實現了一個對css進行壓縮和解壓縮的小程序,暫不適用于js的操作.通過這個案例可以學習php字符替換和正則替換的技術.將css代碼壓縮能夠減小文件的體積,從而減小了網路傳輸量和帶寬占用,減小了伺服器的處理 ...
  • 圖解Windows Server 2008R2 怎樣配置網路負載平衡(NLB)
    本教程我們來學習一下如何在Windows Server 2008R2配置網路負載平衡(NL
  • WinForm中並沒有真正的透明Label,所以我們需要一個自定義控件來創建透明的Label,關鍵代碼如下,這個代碼是兩年前我不記得從哪裏找到的了.今天又看到了,所以記錄下來.也許會用得到. 代碼如下 using S