一、錨點是什么錨點就等同于火影中的“飛雷神之術(shù)”,我們先看百科中錨點的解釋:
再看看“飛雷神之術(shù)”的解釋:
都是做標(biāo)記,然后快速定位。說不定AB(岸本齊史)也是個網(wǎng)頁制作愛好者哦! 其實,關(guān)于錨點,我3年前就寫過一篇針對性文章:“關(guān)于錨點跳轉(zhuǎn)及jQuery下相關(guān)操作與插件”,不過內(nèi)容略浮躁,都是偏表象、偏基本應(yīng)用層面的東西;這里還是關(guān)于錨點,探討的內(nèi)容可能更深層次一點。 其實web頁面上還有一種定位,稱為“focus定位”,也稱“聚焦定位”,當(dāng)頁面上控件,例如文本框、單復(fù)選框、按鈕等在『可響應(yīng)聚焦?fàn)顟B(tài)①』下,通過類似
二、web網(wǎng)頁中錨點定位的觸發(fā)當(dāng)下,錨點定位的應(yīng)用一般有: 這類應(yīng)用往往都是通過點擊觸發(fā)的,于是,難免的,我們可能就很簡單地認(rèn)為錨點定位的觸發(fā)是通過點擊事件。 而實際上,這種順勢而然的理解類似于古人理解為太陽繞著地球轉(zhuǎn)一樣,是有失偏頗的。 我個人認(rèn)為,錨點的定位是通過瀏覽器URL地址的
CSSer們可能對 JS中,并沒有專門的 例如,某頁面的URL是: http://this./is/#hot // location.hash → #hot則, 這里 畫性大發(fā),畫個抽象派的圖吧。
上圖很抽象地暴露了錨鏈和錨點的基友關(guān)系。也就是說,頁面之所以能定位到錨點所在位置,都是因為URL地址中的錨鏈的作用,而不是點擊行為。最好的證據(jù)就是,當(dāng)重新載入帶有錨鏈的頁面時,錨點依然會被定位。 了解錨點定位的觸發(fā)源有助于我們實際應(yīng)用時候問題的規(guī)避等處理。 三、web錨點定位的機制帷幕漸漸拉來,高潮慢慢到來。 作為頁面制作開發(fā)人員,錨點定位一定都有用過④。然,就跟打飛機一樣,大家都會打,也打得來;但是,可能就沒想過這飛機運動的機制什么,我是不是從中發(fā)現(xiàn)什么,然后開個掛,秒了眾多好友。我想,錨點定位可能也是如此。今天,我就說說我對錨點定位機制的理解。 //zxx: ④ 如果你睜大懵懂的雙眼,楚楚可憐的看著我說,“主啊,我沒用過錨點定位誒”;那么,我請你,去超市買包“炫邁口香糖”,一遍嚼炫邁口香糖,一邊點擊本頁面右下角的返回頂部,直到?jīng)]有味道,或者頁面URL地址后面出現(xiàn) 1. 錨點定位他丫就是滾床單 不要邪惡,這里的滾床單就是滾床單,比方說下面的這位狗兄: 床單即頁面中可滾動的元素,汪星人則是該元素內(nèi)部的的錨點元素,錨點定位就是汪星人滾床單。噢啦! OK,注意這里的兩個重要條件: 換句話就是無滾動則無定位!此話務(wù)必牢記。 舉個普通的板栗: 夏天很熱,因為妹子們衣服穿的少,如下HTML: <img id="hot" src="http://image./image/study/s/s512/mm1.jpg"> 于是,當(dāng)含有 您可以狠狠地點擊這里:夏天很熱,因為妹子穿的少demo
之所以美女圖片會瀏覽器窗口頂端顯示,是因為其父元素存在滾動條,可以滾動。 錨點定位的本質(zhì)就是修改容器的滾動高度;如果父容器無滾動,則錨點定位就是失效的命,再舉個有滾動條但不滾動的例子。 您可以狠狠地點擊這里:父容器無滾動錨點定位失效demo 美女圖片的 URL錨鏈也是 為何呢?下面源代碼示意可能會告訴你答案: body,
html {
height: 100%;
margin: 0;
overflow: hidden;
}
.container {
height: 100%;
overflow: auto; /* 滾動條來自這里 */
}
本demo的滾動實際上是由 2. 雙滾動條定位機制 不知有沒有想過這個問題,這種情況下,元素錨點定位,是先改變爺爺?shù)臐L動高度呢還是爸爸的滾動高度呢?小demo可參見這里。 目前,我還沒想出100%證實的實驗方法(因為父親和爺爺?shù)亩ㄎ皇且凰查g完成的,無法通過計算獲知),不過,從理解上,個人認(rèn)為計算是從里面發(fā)起的,原因有兩個: //zxx: 下面的研究與探討多半沒有實際價值,實用主義派可以繞開干你的活去。 demo頁面的情況,無論內(nèi)外先計算,都是兩次就完成,因為,最后定位的結(jié)果是,圖片上邊緣/內(nèi)滾動容器上邊緣/瀏覽器可視區(qū)域上邊緣三者對齊。換成容易理解的解釋:柯南,毛利蘭,小五郎在死人的時候會聚在一起(錨點定位對齊),假設(shè)嫌疑犯A讓柯南和毛利蘭在一起(內(nèi)滾動定位),嫌疑犯B可以讓毛利蘭和小五郎在一起(外滾動定位)。則無論是嫌疑犯B先行動,還是嫌疑犯B先行動,最后都是三者在一起,都是2步完成。 但是,存在這樣一種情況,錨點元素在滾動容器的負(fù)左上距離處或底部(即無法讓元素滾動到頂部),如下截圖: 此時,定位的最后結(jié)果不是圖片上邊緣/內(nèi)滾動容器上邊緣/瀏覽器可視區(qū)域上邊緣三者對齊了。而是,圖片上邊緣,內(nèi)部容器的半部分以及瀏覽器可視區(qū)域上邊緣三者對齊。見下: 此時,如果外部先計算,則需要3步了——外部滾動條不知道內(nèi)部滾動應(yīng)當(dāng)定位的情況,其只能讓內(nèi)部容器上邊緣和瀏覽器對齊(或干等);內(nèi)部定位;外部發(fā)現(xiàn)位置不是自己所想,再次調(diào)整! 顯然,這種情況,要先內(nèi)部可以確定滾動位置的先偏移,然后在父級容器; 再者,我們滾輪鼠標(biāo)觸發(fā)滾動的時候,總是里面的先滾,滾不動了才滾外部滾動條;雖然有些牽強,但,隱隱中可以感受到那種由內(nèi)而外的調(diào)調(diào)。 再啰嗦點廢話,有人可能會疑問,這誰先計算壓根就沒有研究的意義吧,你研究這個的目的是什么呢? 這個問題乍聽上去沒什么問題?實際上,多少隱射出中國這個大環(huán)境浮躁與功利性的心態(tài)。 作為職業(yè)人,學(xué)習(xí)帶有功利性其實也沒什么不好;商業(yè)需要什么,什么學(xué)習(xí)有商業(yè)價值,我去學(xué)習(xí)之,沒什么不好,大家都需要養(yǎng)家糊口的。但是,要是所有人都這個心態(tài),怕不是什么好現(xiàn)象。 我之所以研究“內(nèi)外滾動誰先計算”,真沒什么目的,我就只是好奇,我就是希望得到一個正確的結(jié)論。私心肯定有,我希望自己在尋找結(jié)論的過程中,獲得一些意外的知識與結(jié)論,通過深入的思考,走在別人未曾走過的道路上;當(dāng)然,也希望得到我想要的結(jié)論,而不關(guān)心是否有價值。即單純的研究心態(tài)。 研究這個東西,本來就不應(yīng)該為了某個目的而去做,否則就是功利性研究,這就是為何中國科研爛到一坨屎的原因之一。牛頓哥哥被蘋果砸,他就是好奇,為何蘋果砸我,于是他去研究,你說他研究蘋果為何往下掉有什么目的嗎?難道要向蘋果報仇?在中國,鮮有人會研究蘋果為何往下掉,可能會有很多人會研究怎么讓蘋果長得像西施一樣好看——有錢賺??! 我覺得我們做技術(shù)研究,大可鄙棄“研究這個有什么價值”這個功利性的思考,喜歡什么,好奇什么,就去研究什么,價值?目的?等研究結(jié)束了,可能會有更深遠的價值。 但話說回來,上頭拿錢給你,肯定不是想讓你搞些無用的研究的。所謂人在江湖漂,哪有不挨刀。每人心中都有自己的一桿秤,該如何做還是自己決定。 3. overflow:hidden下的錨點定位 下面這種GIF動畫演示了錨點元素如何通過滾動高度的改變定位到滾動容器上邊緣的;該動畫適用于有滾動條以及沒有滾動條的情況。 我這里多次強調(diào) 正如上面反復(fù)提到,錨點定位本質(zhì)就是滾傳床單。因此,如果元素在滾動容器的左上角區(qū)域及其之外,顯然滾不動,自然也沒有錨點定位的效果!但是,如果元素在滾動容器的右下方及其之外,滾動條就是用來滾動右下溢出內(nèi)容的,因此,這類元素可以被錨點定位。 以上結(jié)論略含糊,后面的例子會讓你清楚我在說什么的。 四、錨點定位機制下的應(yīng)用錨點定位機制的最經(jīng)典應(yīng)用就是“無JavaScript實現(xiàn)選項卡輪轉(zhuǎn)切換效果”。 1 2 3 4 如果您覺得此頁面上看此效果有干擾(錨點跳來跳去,好討厭哦),可以狠狠地點擊這里:無JavaScript實現(xiàn)的切換效果demo 如果您理解上面那句“錨點定位本質(zhì)就是滾動”的含義,則上面的效果就很好理解了。 點擊下面這個按鈕,把上面容器從
上面的例子因為是垂直滾動,因此,容器定高了;我們還可以改成水平滾動,讓列表們水平排列,也可以實現(xiàn)類似的效果。 同樣的,圖片列表那種滑來滑去瀏覽的效果,我們也可以借助錨點;當(dāng)然,使用錨點是為了讓JS掛掉時候依然可用。實際,我們要組織錨點默認(rèn)的行為的,因為——這種跳來跳去的效果不是平滑滴。//zxx: 據(jù)我親自測試,Chrome實驗性質(zhì)的平滑滾動并不適用于錨點跳轉(zhuǎn) 五、:target偽類與錨點的配合在CSS2的時代,錨點的應(yīng)用并不是很廣泛,或者說不被看好與關(guān)注,很大一部分原因在于沒有CSS這個好幫手輔助。CSS3中有個名外 好了,吹噓的話語講完了,到底是真是假,舉個例子讓大家明鑒下。我經(jīng)常會去中國天氣官網(wǎng)看4-7天天氣預(yù)報(影響我的釣魚計劃),其中有個“查看未來4-7天天氣”的按鈕(見下圖),其 其實,要提高體驗很簡單,JS我們保留,HTML和CSS稍作修改,檔次立馬不一樣! 小二,給我上盤demo過來~ 好嘞,客官,您可以狠狠地點擊這里::target與錨點元素顯示隱藏效果demo 點擊demo中“查看4-7天天氣”可以瀏覽展開與收起效果,如下gif動畫截圖演示: 此效果完全HTML+CSS實現(xiàn),JS醬油。此方法與“復(fù)選框顯示隱藏控制法”并稱新時代CSS顯隱技術(shù)兩大神器。
<div id="7d" class="weatherYubao"></div> .weatherYubao:target {} /* 我終于執(zhí)行啦! */
.weatherYubao:target #weatherYubao2 {
display: block;
}
.weatherYubao:target ...但是,不足也顯而易見,觸發(fā)定位,即頁面的scroll滾動會改變⑤,略影響體驗。但,這只是JS尚未載入完畢的交互體驗增強之法,實際還是要借助JS組織默認(rèn)行為的。因此此技術(shù)大可使用,因為是純JS方法上的改進。 //zxx: ⑤ 如果您有錨鏈改變,但頁面不滾動的方法,歡迎分享
六、錨點定位機制產(chǎn)生的問題好的影視作品是要有波瀾起伏的,到目前為止,展示的都是錨點定位的正面形象,現(xiàn)在,有必要曝光下錨點定位機制對交互實現(xiàn)造成的影響。 根據(jù)上面的介紹,理論上,我們可以借助 比方說上面的查看4-7天氣demo,我們再稍作調(diào)整~ 小二~ 客官,您可以狠狠地點擊這里::target偽類與錨點元素的動畫顯隱demo 為展示平滑效果,截了個視頻: 變化很簡單, #weatherYubao2 {
height: 0px;
overflow: hidden;
transition: height .35s;
}
.weatherYubao:target #weatherYubao2 {
height: 300px;
}喲,不錯哦。那有什么問題呢? 我想實現(xiàn)上面 按照我們常規(guī)實現(xiàn)slide向上相關(guān)的思路,應(yīng)該是從 IE10+以及其他現(xiàn)代瀏覽器下,您可以狠狠地點擊這里:常規(guī)slideup思路下demo 但是,demo頁面的效果很奇怪,點擊那個選項卡,元素上去了,然后就不見了,咋回事? 博主,是你這個demo做的有問題吧?。?/p> 非也非也!還是上面那個demo,我們其他什么都不修改,就把從下往上進入的slide動畫效果改成從上往下,也就是動畫方向從 IE10+以及其他現(xiàn)代瀏覽器下,您可以狠狠地點擊這里:常規(guī)slidedown思路下demo 您會發(fā)現(xiàn):“喲,這里效果挺正常的嘛~~”。
真的就 其實我上面已經(jīng)給了答案了,上面曾說過下面這段話:
文字解釋蒼白,看下面的分解示意圖: 如何解決此問題?
避免這個問題很簡單,我們只要讓動畫效果,尤其code>translateY(100%)的應(yīng)用延時,CSS是可以搞定的。 有必要來一發(fā),您可以狠狠地點擊這里:延時解決slideup和錨點定位沖突demo 您會驚訝地發(fā)現(xiàn),已經(jīng)幾乎完全真實的slideup效果,之前的選項內(nèi)容向上隱藏,新點擊的內(nèi)容從下出現(xiàn)顯示。 于是,純CSS實現(xiàn)帶slide動畫效果的選項卡完美呈現(xiàn)。相關(guān)CSS代碼如下(省略私有前綴, @keyframes slideupin {
0% {transform: translateY(100%); }
100% { transform: translateY(0%);}
}
.list{
... position:absolute;
transform: translateY(-100%);
transition: transform .35s .05s linear;
}
.list:target {
z-index: 1; /* 最上面顯示 */
transform: translateY(0%);
animation: slideupin .35s .05s linear forwards;
}七、未來高端流行技術(shù)之一:錨點技術(shù)其實,當(dāng)下,錨點技術(shù)就可以在實際項目中大規(guī)模使用了,不過其身份是“CSS效果增強”,即更強的CSS action效果。我們依然保留JS在交互中的主導(dǎo)地位,但是同時完美融合CSS+HTML的錨點技術(shù)——JS只要 然,融合與兼顧必然會存在一些細節(jié)上的問題。這些問題即使我現(xiàn)在拿出來講,其實也是秋風(fēng)掃落葉,無人問津,時機很重要。 我一向推薦看問題要面向未來。雖然說,最為錨點技術(shù)最核心的
舉個簡單例子。比方說微博這個產(chǎn)品,09年10年出來的,無論是新浪的,還是騰訊的。網(wǎng)頁的效果、圖形化東西等主要是通過圖片增強的,而不是CSS增強;到了當(dāng)下,視網(wǎng)膜等設(shè)備對網(wǎng)頁有個更高的要求,圖片增強的網(wǎng)頁有種鮮花插牛糞的感覺。于是,后面的結(jié)果是——專門做一個獨立的針對移動設(shè)備的版本! 其中要看清兩點: 學(xué)習(xí)馬云,高瞻遠矚,把握未來。 八、結(jié)尾滾床單時間進入新環(huán)境,需要時間適應(yīng),例如新的時間規(guī)劃安排等,技術(shù)的學(xué)習(xí)與博客更新會慢慢進入正常。擦,突然想起來,忘記探討一個重要的問題了,為何 最后再補充兩個小tip: 好久沒寫東西了,所以可能話癆了點,能靜心讀到這里的朋友們我雙手合一,表示誠摯的感謝!另外,文中有些觀點結(jié)論都是自己感性認(rèn)識,可能存在不準(zhǔn)確之處,歡迎大力指正。 希望本文的內(nèi)容能夠?qū)δ膶W(xué)習(xí)有所幫助。 哦,快12點了,滾床單時間到了…… (本篇完) |
|
|
來自: 風(fēng)之飛雪 > 《CSS》