涔嬪墠鐪嬪埌涓€绡囩函CSS杞挱鐨勬枃绔狅紝褰撴椂鐮旂┒浜嗕竴涓嬪疄鐜帮紝澶ф鏄敤hash锛堥敋鏍囩锛夊拰scroll-snap瀹炵幇鐨勶紝浣嗘槸鍏蜂綋瀹炵幇宸茬粡璁颁笉娓呬簡銆傛濂藉垎浜兢閲屾殏鏃舵病鏈夎瘽棰橈紝鎵€浠ユ垜瑙夊緱鍙互浣滀负涓€涓案涔呯殑琛ュ厖灏忛摼鎺ワ紝澶у娴忚CodePen绛夌ぞ鍖烘壘涓ぇ瀹舵劅鍏磋叮鐨凞emo鐮旂┒涓€涓?鍒嗕韩涔嬪墠杩樻槸闇€瑕佽嚜宸遍噸鏂扮爺绌朵竴涓嬶紝涓嶇劧澶€滅敎鈥濅簡锛岃鏁呬簨鐨勬椂鍊欏嚭閿欎簡寰堝按灏€傞鍏堬紝鎴戜滑鏉ュ疄鐜颁竴涓畝鍗曠殑鍙帶杞挱绀轰緥銆傚湪瀹炰緥鐨勫疄鐜颁腑锛屾垜浼氱敤鍒颁竴涓妧鏈爤銆傛垜甯屾湜浣犺兘瀵筆ug(HTMLpreprocessor)Stylus(CSSpreprocessor)P.S.鏈夋墍浜嗚В銆傚悗闈㈢殑绗旇鍐呭浼氶€愭瀹炵幇鐩爣鏂囩珷鐨勪緥瀛愶紝杩樺師鐩爣鏂囩珷涓殑鍏冪礌鏍峰紡锛屾湁涓€鐐瑰彉鍖栦絾涓嶄細澶ぇ锛屽洜涓烘垜瑙夊緱鏍峰紡澶笐浜嗐€傪煂癈odePenDemo馃挱璇存槑锛氬彲浠ョ偣鍑讳笂渚嬩腑鐨則ab鏌ョ湅瀹炵幇浠ｇ爜锛屽湪html涓啓鍏?涓?div骞跺０鏄庡搴旂殑ID锛涘苟鍦ㄥ悗闈㈡坊鍔?a>鏍囩锛屾敼鍙楿RL鍊间腑鐨刪ash鏉ユ帶鍒跺崱鐗囩殑鍒囨崲锛涗娇鐢╟ss涓殑scroll-behavior:smooth灞炴€у疄鐜板垏鎹㈠崱鐗囩殑骞虫粦婊氬姩鏁堟灉銆備絾鏄己灏戝垏鎹㈠墠杩涘悗閫€鎸夐挳锛屾墍浠ユ垜浠潵瀹炵幇杩欎釜鍔熻兘锛氿煂癈odePenDemo2馃挱璇存槑锛氬叾瀹炲緢绠€鍗曪紝缁欐瘡寮犲崱鐗囨坊鍔犲墠杩涘悗閫€鎸夐挳鐨?a>鏍囩鍗冲彲銆傛湁鐐归夯鐑︾殑鏄浣曡杩欎袱涓寜閽殢鐫€鍗＄墖鐨勫垏鎹㈣€屽彉鍖栵紝鑰屼笉琚笅涓€寮犲崱鐗囩殑鎸夐挳瑕嗙洊锛屽洜涓鸿繖涓や釜鎸夐挳涓嶄細闅忕潃鍗＄墖鐨勫垏鎹㈣€岀Щ鍔紝杩欓噷闇€瑕佽剳娲炲ぇ寮€锛佹甯告€濈淮鑲畾浼氬皾璇曚慨鏀瑰墠杩涘悗閫€鎸夐挳鐨刾arent鐨勫畾浣嶆柟寮忋€傜‘瀹為渶瑕佹敼鎴恜osition:relative锛屼絾杩欏叾瀹炴槸涓轰簡姣忔鍒囨崲鍗＄墖鏃讹紝鏀瑰彉瀵瑰簲鐨勯敋閾炬帴銆傚師鏉ョ殑渚嬪瓙鏄粠carousel缁勪欢鐨勬渶澶栧眰瀹瑰櫒鍒涘缓涓や釜浼被锛?:before鍜?:after锛屼负瀹冧滑璁剧疆togglebutton鐨勬牱寮忥紝璁剧疆涓虹偣鍑婚€氳繃锛岀劧鍚庡湪鏃嬭浆鏈ㄩ┈鍗＄墖鍚庨€€鎸夐挳鍏锋湁閫忔槑鑳屾櫙銆傝繖鏍凤紝鏄剧ず鐨勨€滄寜閽€濅笉浼氶殢鍗＄墖绉诲姩锛岃€屽疄闄呯殑鍒囨崲鎸夐挳浼氶殢鍗＄墖绉诲姩锛屼絾涓嶄細琚煡鐪嬭€呭彂鐜般€傚姛鑳藉熀鏈疄鐜颁簡锛屾帴涓嬫潵鎴戜滑杩樺師鍘熶緥瀛愮殑椋庢牸銆傪煂癈odePenDemo3鍜屽師鏉ョ殑渚嬪瓙鐩告瘮锛岄櫎浜嗚嚜鍔ㄦ挱鏀捐繕灏戜簡浠€涔堬紵emmmmm...鑷姩鎾斁锛侌煉ヨ€佹澘鍦ㄦ渶鍚庰煉ヨ嚜鍔ㄨ疆鎾渶鍚庢潵鐪嬬湅濂规槸濡備綍瀹炵幇鑷姩鎾斁鐨勩€傚鏋滀粬杩欓噷涓嶈鏄庡疄鐜版柟娉曪紝鎴戜細涓€澶撮浘姘达紝涓嶈繃鐪熺殑寰堢濂囷紒馃憤棣栧厛鎴戞參鎱㈠湴灏嗘粴鍔ㄦ崟鎹夌偣鍚戝彸鍋忕Щ锛屼娇婊氬姩鍖哄煙鐢变簬琚崟鎹夊埌瀹冧滑鑰岃窡闅忋€傛粴鍔ㄦ暣寮犲够鐏墖鐨勫搴﹀悗锛屾垜鍋滅敤浜嗘崟鎹夊姛鑳姐€傛粴鍔ㄥ尯鍩熺幇鍦ㄤ粠婊氬姩鎹曟崏鐐硅В寮€銆傛粴鍔ㄥ尯鍩熺幇鍦ㄤ笌婊氬姩鎹曟崏鐐硅В闄ょ粦瀹氥€傜幇鍦ㄦ垜璁╂粴鍔ㄦ崟鎹夌偣璺冲洖瀹冧滑鐨勫垵濮嬩綅缃紝鑰屼笉鐢ㄥ畠浠€滄崟鎹夋嫋鎷解€濇粴鍔ㄥ尯鍩熺劧鍚庢垜閲嶆柊杩涜鎹曟崏锛岀幇鍦ㄨ婊氬姩鍖哄煙鎹曟崏鍒颁笉鍚岀殑鎹曟崏鐐桂煠劧鍚庢垜閲嶆柊-鎺ュ悎鐜板湪璁╂粴鍔ㄥ尯鍩熸崟鎹夊埌涓嶅悓鎹曟崏鐐圭殑鎹曟崏銆傚叾瀹炰娇鐢╯croll-snap浼氬皢scroll瀹瑰櫒鐨勬崟鑾风偣鏀逛负浣犺缃殑鍏冪礌瀵归綈浣嶇疆锛坰croll-snap-align锛夛紝鐒跺悗淇敼left灞炴€х殑鍊硷紝浣縮croll瀹瑰櫒鍚戝彸婊氬姩瀹炵幇鍚戝悗婊氬姩鐨勬晥鏋溿€傜劧鍚庨€氳繃淇敼褰撳墠鍏冪礌鐨勫榻愪綅缃负none锛岃婊氬姩瀹瑰櫒鎹曟崏鍒颁笅涓€涓厓绱犵殑瀵归綈浣嶇疆锛屼粠鑰岃揪鍒拌嚜鍔ㄦ棆杞殑鏁堟灉锛岄偅灏辨潵瀹炵幇鍚э紒馃尠CodePenDemo4浣嗘槸鎴戞病鏈夋坊鍔犳偓鍋滃仠姝㈣嚜鍔ㄦ棆杞拰鍏朵粬涓€浜涗紭鍖栥€傚鏋滀綘鏈夊叴瓒ｏ紝鍙互鑷繁瀹炵幇銆備娇鐢ㄧ殑CSS灞炴€э細@media(hover:hover)-CSS|MDN:focus-within-CSS|MDNprefers鍑忓皯杩愬姩-CSS|MDN瀹屽叏澶嶇幇鍘熸牱锛侌煂癈odePenDemo5瀹岀粨鍏跺疄涓€寮€濮嬫垜涔熶笉鐭ラ亾浠栨槸鎬庝箞瀹炵幇瑙嗗樊婊氬姩鐨勶紝鍚庢潵鍦ㄧ爺绌惰嚜鍔ㄨ疆鎾殑鏃跺€欑獊鐒剁伒楠屼簡锛屼簬鏄€氳繃transform:translate3d()鎶婂畠鍔犲埌涓棿鍏冪礌涓婏紝娣诲姞Z杞村睘鎬э紝浣垮叾鍦ㄨ疆鎾崱涓娾€滄诞鈥濆嚭骞抽潰锛岀劧鍚庡湪鏈€澶栧眰瀹瑰櫒鐨勨€渞otator鈥濅腑璁剧疆閫忚锛屾寚瀹氬鍣ㄥ钩闈笌Z杞磋窛绂荤獥鎴枫€備絾鏄湁涓€涓棶棰橈紝鍙湁鍦ㄦ墽琛宎utoplay鍔ㄧ敾鐨勬椂鍊欐墠浼氫綋鐜板嚭鏉ワ紝鎵嬪姩鎺у埗寮€鍏虫槸鎰熻涓嶅埌鐨勶紝鍥犱负鎵嬪姩婊氬姩鐨勬椂鍊檚croll-snap鏄笉鑳藉簲鐢ㄧ殑銆傗殹鍏煎鎬т粈涔堬紵浣犻棶鎴戝吋瀹规€э紵鏈嬪弸绱浜嗭紒鍒兂浜嗭紝scroll-snap灞炴€у湪CR闃舵锛屾槸涓€涓€欓€夈€傝窛绂绘寮忎笂绾胯繕鏈変袱涓樁娈碉紝Safari涓嶆敮鎸乻croll-behavior锛堝钩婊戞粴鍔級灞炴€э紝鈥渟croll-behavior鈥潀鎴戝彲浠ヤ娇鐢ㄢ€渟croll-snap鈥濆悧锛熻兘涓嶈兘鐢紝鎵€浠ョЩ鍔ㄧ鐨勫吋瀹规€ф湁寰堝ぇ鐨勯棶棰樸€傛瘯绔熻繕鏈夋瘨鐦も€斺€斿井淇¤嚜甯︾殑娴忚鍣ㄤ笉鏀寔杩欎簺灞炴€с€傛垜鍦ㄥ埗浣滆繃绋嬩腑娌℃湁鑰冭檻杩囩Щ鍔ㄣ€傛垜鍙槸鏀惧純浜哖C绔殑閫傞厤锛孭C绔繕鑳界帺銆傛棤娉曞疄鐜拌嚜鍔ㄨ疆鎾紝涔熷氨鏃犳硶瀹炵幇瑙嗗樊婊氬姩銆傚紕杩欎箞澶х殑鍦堝瓙鍏跺疄鍙槸鍥句釜濂界帺鐨勶紝涓嶈繃鑳藉皾璇曠偣鏂扮殑涓滆タ锛屽€熼壌涓€涓嬪埆浜虹殑鑴戞礊杩樻槸涓嶉敊鐨勩€傛枃妗ｉ摼鎺ユ粴鍔ㄨ涓?CSS|MDN閫忚-CSS|MDNscroll-snap-type-CSS|MDNscroll-snap-align-CSS|MDNhover-CSS|MDN:focus-within-CSS|MDNprefers鍑忓皯杩愬姩-CSS|浠呰疆鎾瓅CSS-Tricks浣犲彲浠ュ湪鍙敤HTML鍜孋SS鍒朵綔涓€涓粦鍧椾笂璧板緱鏇磋繙|芦寮犻懌鏃?閼┖闂?閼敓娲绘湰鏂囧弬涓庝簡SegmentFault鎬濈淮鍐欎綔鎸戞垬璧涳紝娆㈣繋姝ｅ湪闃呰鐨勪綘鍔犲叆銆?/p>
