如何修復IScroll5使用錨點形成的bug的顯示bug

最近正在開發一個相似於通信錄的Webapp,其中滾動的時候使用了IScroll5。通信錄的最右側使用了A-Z的小字母,點擊快速滾動到已該字母打頭的通信錄內容。
在進行本頁跳轉的時候我使用了錨點的技術,然而這件事情帶來了IScroll的BUG,在滾動到某字母打頭的通信錄後,該字母以前的通信錄內容沒法再滾動到。
我查詢了做者在github的bug反饋,發如今2013年IScroll4的時候,做者就承諾解決問題,然並卵,到今天該bug仍未解決,好在做者提供了一個內部函數支持調轉到某個id的位置,咱們將利用這個函數進行bug修復。

htmljavascript

  1 <div class="contactBar">
  2     <a class="aToz" href="#A">A</a>
  3     <a class="aToz" href="#B">B</a>
  4     <a class="aToz" href="#C">C</a>
  5     <a class="aToz" href="#D">D</a>
  6     <a class="aToz" href="#E">E</a>
  7     <a class="aToz" href="#F">F</a>
  8     <a class="aToz" href="#G">G</a>
  9     <a class="aToz" href="#H">H</a>
 10     <a class="aToz" href="#I">I</a>
 11     <a class="aToz" href="#J">J</a>
 12     <a class="aToz" href="#K">K</a>
 13     <a class="aToz" href="#L">L</a>
 14     <a class="aToz" href="#M">M</a>
 15     <a class="aToz" href="#N">N</a>
 16     <a class="aToz" href="#O">O</a>
 17     <a class="aToz" href="#P">P</a>
 18     <a class="aToz" href="#Q">Q</a>
 19     <a class="aToz" href="#R">R</a>
 20     <a class="aToz" href="#S">S</a>
 21     <a class="aToz" href="#T">T</a>
 22     <a class="aToz" href="#U">U</a>
 23     <a class="aToz" href="#V">V</a>
 24     <a class="aToz" href="#W">W</a>
 25     <a class="aToz" href="#X">X</a>
 26     <a class="aToz" href="#Y">Y</a>
 27     <a class="aToz" href="#Z">Z</a>
 28 </div>
 29 <div id="contactsWrapper">
 30     <div class="content">                
 31     <div class="content-list" id="contacts-list-A">
 32         <div class="content-list-title"><a id="A">A</a></div>
 33         <div class="contacts"></div>
 34     </div>
 35     <div class="content-list" id="contacts-list-B">
 36             <div class="content-list-title"><a id="B">B</a</div>
 37         <div class="contacts"></div>
 38         </div>
 39     <div class="content-list" id="contacts-list-C">
 40         <div class="content-list-title"><a id="C">C</a></div>
 41         <div class="contacts"></div>
 42     </div>
 43     <div class="content-list" id="contacts-list-D">
 44         <div class="content-list-title"><a id="D">D</a></div>
 45         <div class="contacts"></div>
 46     </div>
 47     <div class="content-list" id="contacts-list-E">
 48         <div class="content-list-title"><a id="E">E</a></div>
 49         <div class="contacts"></div>
 50     </div>
 51     <div class="content-list" id="contacts-list-F">
 52         <div class="content-list-title"><a id="F">F</a></div>
 53         <div class="contacts"></div>
 54     </div>
 55     <div class="content-list" id="contacts-list-G">
 56         <div class="content-list-title"><a id="G">G</a></div>
 57         <div class="contacts"></div>
 58     </div>
 59     <div class="content-list" id="contacts-list-H">
 60             <div class="content-list-title"><a id="H">H</a></div>
 61         <div class="contacts"></div>
 62     </div>
 63     <div class="content-list" id="contacts-list-I">
 64         <div class="content-list-title"><a id="I">I</a></div>
 65         <div class="contacts"></div>
 66     </div>
 67     <div class="content-list" id="contacts-list-J">
 68         <div class="content-list-title"><a id="J">J</a></div>
 69         <div class="contacts"></div>
 70     </div>
 71     <div class="content-list" id="contacts-list-K">
 72         <div class="content-list-title"><a id="K">K</a></div>
 73         <div class="contacts"></div>
 74     </div>
 75     <div class="content-list" id="contacts-list-L">
 76         <div class="content-list-title"><a id="L">L</a></div>
 77         <div class="contacts"></div>
 78     </div>
 79     <div class="content-list" id="contacts-list-M">
 80         <div class="content-list-title"><a id="M">M</a></div>
 81         <div class="contacts"></div>
 82     </div>
 83     <div class="content-list" id="contacts-list-N">
 84         <div class="content-list-title"><a id="N">N</a></div>
 85         <div class="contacts"></div>
 86     </div>
 87     <div class="content-list" id="contacts-list-O">
 88         <div class="content-list-title"><a id="O">O</a></div>
 89         <div class="contacts"></div>
 90     </div>
 91     <div class="content-list" id="contacts-list-P">
 92         <div class="content-list-title"><a id="P">P</a></div>
 93         <div class="contacts"></div>
 94     </div>
 95     <div class="content-list" id="contacts-list-Q">
 96         <div class="content-list-title"><a id="Q">Q</a></div>
 97         <div class="contacts"></div>
 98     </div>
 99     <div class="content-list" id="contacts-list-R">
100         <div class="content-list-title"><a id="R">R</a></div>
101         <div class="contacts"></div>
102     </div>
103     <div class="content-list" id="contacts-list-S">
104         <div class="content-list-title"><a id="S">S</a></div>
105         <div class="contacts"></div>
106     </div>
107     <div class="content-list" id="contacts-list-T">
108         <div class="content-list-title"><a id="T">T</a></div>
109         <div class="contacts"></div>
110     </div>
111     <div class="content-list" id="contacts-list-U">
112         <div class="content-list-title"><a id="U">U</a></div>
113         <div class="contacts"></div>
114     </div>
115     <div class="content-list" id="contacts-list-V">
116         <div class="content-list-title"><a id="V">V</a></div>
117         <div class="contacts"></div>
118     </div>
119     <div class="content-list" id="contacts-list-W">
120         <div class="content-list-title"><a id="W">W</a></div>
121         <div class="contacts"></div>
122     </div>
123     <div class="content-list" id="contacts-list-X">
124         <div class="content-list-title"><a id="X">X</a></div>
125         <div class="contacts"></div>
126     </div>
127     <div class="content-list" id="contacts-list-Y">
128         <div class="content-list-title"><a id="Y">Y</a></div>
129         <div class="contacts"></div>
130     </div>
131     <div class="content-list" id="contacts-list-Z">
132         <div class="content-list-title"><a id="Z">Z</a></div>
133         <div class="contacts"></div>
134     </div>
135     </div>
136 </div>                                        

jscss

//請注意使用id做爲錨點的標誌點,IScroll不支持那麼做爲錨點的標誌點
if (location.hash) {
    window.scrollTo(0, 0);
}
//IScroll初始化
var myScroll = new IScroll('#contactsWrapper', { click: false, zoom: true });
if (location.hash) {               
    setTimeout(function () {
    myScroll.scrollToElement(location.hash, 0);
     }, 50);
}
//關鍵代碼
$('.aToz[href^="#"]').on('click touchstart', function (e) {
    //阻止默認點擊事件
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    if($('#contacts-list-'+target.substring(1)+'').css('display')=='block'){
        //利用IScroll的scrollToElement方法進行錨點點擊效果
        myScroll.scrollToElement(target,0);
    }          
    return false
});  
     
document.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false);    

使用IScroll的scrollToElement替代原有的錨點跳轉,並阻止默認的錨點跳轉是解決的關鍵點。html

謝謝java

相關文章
相關標籤/搜索