最近正在开发一个类似于通讯录的Webapp，其中滚动的时候使用了IScroll5。通讯录的最右侧使用了A-Z的小字母，点击快速滚动到已该字母打头的通讯录内容。在进行本页跳转的时候我使用了锚点的技术，然而这件事情带来了IScroll的BUG，在滚动到某字母打头的通讯录后，该字母之前的通讯录内容无法再滚动到。我查询了作者在github的bug反馈，发现在2013年IScroll4的时候，作者就承诺解决问题，然并卵，到今天该bug仍未解决，好在作者提供了一个内部函数支持调转到某个id的位置，我们将利用这个函数进行bug修复。
html
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>
js
//请注意使用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替代原有的锚点跳转，并阻止默认的锚点跳转是解决的关键点。
谢谢
时间： 2024-11-05 14:57:04