娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶х浠嬬粛涓や釜涓庢粴鍔ㄥ畾浣嶇浉鍏崇殑CSS灞炴€э細scroll-padding鍜宻croll-margin鍦ㄥ钩鏃剁殑寮€鍙戜腑锛屾垜浠粡甯镐細閬囧埌闇€瑕佸揩閫熷畾浣嶇殑闂锛屾瘮濡俢ommonanchors鐐瑰畾浣?ul>
璇硶渚嬪瓙...
璇硶...
绀轰緥...
...杩欐牱锛屽綋a鏍囩琚偣鍑绘椂锛屼細鑷姩瀹氫綅鍒板搴旂殑鍐呭涓婏紝濡備笅銆備絾鏄痑nchor瑙﹀彂鐨勫畾浣嶉粯璁ゆ槸闈犺繎婊氬姩瀹瑰櫒鐨勮竟缂樸€傚鏋滅敤fixed瀹氫綅鐨刪ead绛変竴浜涘畾浣嶅厓绱狅紝浼氳闃诲銆傛濡傛偍鍦ㄤ笅闈㈢湅鍒扮殑锛屾爣棰樷€淓xample鈥濊sticky瀹氫綅鐨勫ご閮ㄨ鐩栵紝鍥犱负瀹冮潬杩戦《閮ㄣ€傞偅涔堬紝濡備綍璁╃洰鏍囧厓绱犲湪鑷姩瀹氫綅鏃堕鐣欒冻澶熷ぇ鐨勨€滃畨鍏ㄢ€濋棿璺濆憿锛?銆佷竴琛宑ss灏卞浜嗭紝鐪嬩技楹荤儲鐨勯棶棰樺叾瀹炰竴琛宑ss灏卞彲浠ヨВ鍐筹紝灏辨槸scroll-margin锛屼笅闈㈡槸MDN浠嬬粛鐨剆croll-margin灞炴€х殑鍊硷紝浠ｈ〃鐢ㄦ潵鎷栧姩鐨刴arginbox鍏冪礌鍒版樉绀哄尯鍩熸嫋鍔ㄦ粴鍔ㄥ尯鍩熺殑璧风偣銆傛嫋鍔ㄦ粴鍔ㄥ尯鍩熺敱鍙樻崲鍚庤竟妗嗗ぇ灏忕殑妗嗗厓绱犲喅瀹氾紝瀹冧細鎵惧埌妗嗗厓绱犵殑鐭╁舰杈圭晫锛堝湪婊氬姩瀹瑰櫒鐨勫潗鏍囩┖闂磋酱涓婏級锛屽苟娣诲姞鎸囧畾鐨勮捣鐐广€傝繖涓弿杩板緢瀹樻柟锛屼笉鐭ラ亾鍦ㄨ浠€涔堭煒傦紝鎵€浠ュソ涔呴兘涓嶇煡閬撹繖涓睘鎬х殑鐪熸鐢ㄩ€斻€傚湪涓婇潰鐨勪緥瀛愪腑锛屽彲浠ョ洿鎺ヨ缃畇croll-marginh2{scroll-margin:6rem;}涓虹洰鏍囥€傝缃繖涓睘鎬у悗锛屽綋鑷姩婊氬姩瀹氫綅鍒癶2鏃讹紝浼氳嚜鍔ㄩ鐣欎竴涓?rm鐨勯棿闅旓紙闃叉琚玥ead鎸′綇锛夛紝涓嬮潰鏄紨绀猴紙绾㈡琛ㄧず6rem鐨勯棿闅旓級鏄笉鏄緢绠€鍗曪紝鏈€缁堟晥鏋滃涓嬪叾瀹濵DN瀹樻柟宸茬粡閲囩敤浜嗚繖绉嶆柟寮忋€傚鏋滀綘缁忓父鐪婱DN锛屼綘浼氬彂鐜版湁寰堝闈炲父宸у鐨勫疄鐜帮紝濡備笅2.鑰宻croll-padding绫讳技浜巗croll-margin杩樻湁涓€涓猻croll-padding锛屼袱鑰呭姛鑳界浉鍚岋紝浣嗚鍔ㄧ殑瀵硅薄涓嶅悓銆傚墠闈㈢殑渚嬪瓙鍙互鐪嬪埌锛宻croll-margin鏄洿鎺ュ湪褰撯€嬧€嬪墠鍏冪礌涓婅缃殑锛宻croll-padding涓嶅悓锛岄渶瑕佸湪婊氬姩瀹瑰櫒涓婅缃紝姣斿html{scroll-padding:6rem}杩欎釜鏂规硶涔熷彲浠ュ疄鐜扮浉鍚岄€氬父锛屾偍鍙互閫夋嫨涓ょ鏂规硶涓殑浠讳綍涓€绉嶃€傚鏋滅煡閬撴槸鍝釜婊氬姩瀹瑰櫒锛屽彲浠ョ洿鎺ラ€夋嫨浣跨敤scroll-padding銆備笉鐒剁敤scroll-margin鍙戠幇sifu鐨勯敋鐐瑰畾浣嶄篃鏄敤scroll-Padding鐨勶紝缁欎釜璧瀪3.鍏朵粬婊氬姩瀹氫綅鏂瑰紡闄や簡閿氱偣瀹氫綅锛岃繕鏈夊叾浠栬Е鍙戞粴鍔ㄥ畾浣嶇殑鏂瑰紡1.scrollIntoView鏈夋椂锛屾垜浠渶瑕佸皢鎸囧畾鐨勫厓绱犳粴鍔ㄥ埌瑙嗙嚎鍐咃紝閭ｄ箞鎴戜滑灏遍渶瑕佷娇鐢ㄥ埌杩欐牱涓€涓狣OM鏂规硶锛歴crollIntoViewelement.scrollIntoView();杩欎釜瀹氫綅鍜屼箣鍓嶇殑閿氱偣瀹氫綅鏄竴鏍风殑銆傜暀涓€瀹氳窛绂?.鐒︾偣瀹氫綅榛樿鎯呭喌涓嬶紝褰撶劍鐐硅鑱氱劍鏃讹紝鍏冪礌锛堝閾炬帴锛変細鑷姩婊氬姩鍒拌绾裤€傚涓婅堪鎯呭喌锛屽鏋滄湁鍥哄畾鐨勫畾浣嶅厓绱狅紝鍦ㄥ鐒︽椂鍙兘浼氳鎸′綇銆傚鏋滆缃簡scroll-margin鎴栬€卻croll-pading锛岃繖鏍峰彲浠ラ伩鍏嶆壘涓嶅埌鐒︾偣鐨勬儏鍐碉紝淇濊瘉濮嬬粓鑳界湅鍒扮劍鐐广€備笅闈㈡槸閫氳繃tab閿殑鐒︾偣锛乕姝ｅ湪涓婁紶...]()3銆係croll-snap鐨勫彟涓€绉嶆儏鍐垫槸婊氬姩鎹曡幏锛歴croll-snap-type锛岃灞炴€у厑璁稿湪婊氬姩鏃惰嚜鍔ㄦ崟鑾峰叧閿偣銆備竴鑸儏鍐典笅锛屾粴鍔ㄤ复鐣岀偣闈犺繎婊氬姩瀹瑰櫒銆傚儚杩欐牱瑕侀鐣欎竴瀹氳窛绂绘€庝箞澶勭悊锛熻繕鏄繖涓猻croll-margin锛岀粰涓嬮潰鐨勭浜屼釜鍏冪礌璁剧疆涓€瀹氱殑scroll-margin锛屾晥鏋滃彲浠ョ湅鍒板涓嬶紝婊氬姩鍒扮浜屼釜鍏冪礌鐨勬椂鍊欙紝鎻愬墠棰勭暀涓€瀹氱殑璺濈锛屼篃鍙互璁剧疆璐熷€硷紝杩欐牱褰撴粴鍔ㄥ埌绗簩涓厓绱犳椂锛屽彲浠ユ彁鍓嶇湅鍒扮涓変釜鍏冪礌鐨勯儴鍒嗗唴瀹广€傜洰鍓嶆垜鐭ラ亾鐨勫氨鏄繖浜涘畾浣嶆柟娉曘€傚鏋滆繕鏈夊叾浠栫殑锛屾偍鍙互鐣欒█璁╂垜浠煡閬撱€?.鍏煎鎬у拰鎬荤粨鏈€鍚庡啀鏉ョ湅鐪嬪吋瀹规€э紝涓€涓綋楠屾彁鍗囩殑灞炴€э紝鍏煎鎬ц繕涓嶉敊锛坰afari鏈夌偣hip馃槶锛夈€傝繖閲屾湁涓枒鎯戯紝鍑轰簡杩欎箞涔咃紝鎴戞€庝箞涓€鐩翠笉鐭ラ亾鍛紵鍏跺疄鎴戞槸琚玀DN瀹樼綉缁欒瀵间簡銆傞鍏堬紝scroll-margin鍜宻croll-padding瀹樻柟鐨勪緥瀛愬彧鏈塻croll-snap-type鐨勫簲鐢ㄥ満鏅紝瀵艰嚧鎴戣浠ヤ负杩欎釜灞炴€ф槸鍜宻croll-snap-type缁撳悎浣跨敤鐨勩€傛槸鐨勶紝娌℃湁鑰冭檻鍏朵粬鏂瑰悜銆傚彟澶栵紝浠庢椂闂翠笂鐪嬶紝杩欎釜灞炴€х‘瀹炴槸鍜宻croll-snap-type锛堝湪chrome涓婏級鍑犱箮鍚屾椂鎺ㄥ嚭鐨勩€傝繖浠庡吋瀹规€т笂灏卞彲浠ョ湅鍑烘潵锛屽浜嗗嚑鍒嗙浉淇′箣鍓嶇殑璇銆傛墍浠ワ紝涓€鐩翠互鏉ワ紝杩欎箞涓€涓秴绾уソ鐢ㄧ殑CSS灞炴€ч兘琚垜蹇界暐浜嗭紝鍙儨馃槶涓嶈繃锛岀幇鍦ㄧ悊瑙ｄ篃涓嶆櫄锛屾€荤粨涓€涓嬶紝榛樿鎯呭喌涓嬶紝鑷姩婊氬姩瀹氫綅鎬绘槸绱ч偦婊氬姩瀹瑰櫒锛屾湁鏃朵笉濂界敤scroll-padding鍜宻croll-margin鍙互鍦ㄨ嚜鍔ㄦ粴鍔ㄥ畾浣嶆椂棰勭暀鎸囧畾鐨勯棿璺濄€俿croll-margin鐨勫璞℃槸鐩爣鍏冪礌锛宻croll-padding鐨勫璞℃槸婊氬姩瀹瑰櫒銆傛粴鍔ㄥ畾浣嶆柟寮忔湁閿氱偣瀹氫綅銆乻crollIntoView瀹氫綅銆佺劍鐐瑰畾浣嶅拰Scroll-snap瀹氫綅浣撻獙澧炲己灞炴€э紝鍏煎鎬ц繕涓嶉敊锛屼富瑕佹槸safari姣旇緝钀藉悗锛岃繖涓狢SS灞炴€у嚑涔庝笉鐢ㄦ兂灏卞彲浠ョ敤锛屽彧瑕佽繖涓睘鎬ф坊鍔犲埌婊氬姩瀹瑰櫒涓紝鍙互鍦ㄤ笉鐭ヤ笉瑙変腑鎻愬崌婊氬姩瀹氫綅浣撻獙锛岃€屼笖鎴愭湰寰堜綆锛屽笇鏈涘澶氫娇鐢ㄣ€傛渶鍚庯紝濡傛灉瑙夊緱瀵逛綘鏈夊ソ澶勫拰甯姪锛屾杩庣偣璧炪€佹敹钘忋€佽浆鍙戔潳鉂も潳娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺?/p>
