浠嬬粛涓や釜涓庢粴鍔ㄥ畾浣嶇浉鍏崇殑CSS灞炴€э細scroll-padding鍜宻croll-margin鍦ㄥ钩鏃剁殑寮€鍙戜腑锛屾垜浠粡甯镐細閬囧埌闇€瑕佸揩閫熷畾浣嶇殑闂锛屾瘮濡傚父瑙佺殑anchor瀹氫綅
璇硶...
绀轰緥...
...杩欐牱锛屽綋a鏍囩琚偣鍑绘椂锛屼細鑷姩瀹氫綅鍒板搴旂殑鍐呭锛屽涓嬩絾鏄紝杩欑閿氱偣瑙﹀彂鐨勫畾浣嶈鐐归粯璁ら潬杩戞粴鍔ㄥ鍣ㄧ殑杈圭紭銆傚鏋滀竴浜涘畾浣嶅厓绱狅紝姣斿fixed瀹氫綅鐨勫ご閮紝浼氳鎸′綇锛屽涓嬪浘锛屾爣棰樷€淓xample鈥濋潬杩戦《閮紝瀵艰嚧琚尅浣忕殑sticky瀹氫綅鐨勫ご閮ㄨ瑕嗙洊銆傞偅涔堬紝濡備綍璁╃洰鏍囧厓绱犲湪鑷姩瀹氫綅鏃堕鐣欒冻澶熷ぇ鐨勨€滃畨鍏ㄢ€濋棿璺濆憿锛?.涓€琛孋SS瑙ｅ喅娌￠敊锛岀湅浼奸夯鐑︾殑闂鍏跺疄涓€琛孋SS灏卞彲浠ヨВ鍐筹紝閭ｅ氨鏄痵croll-margin锛屼笅闈㈡槸MDN浠嬬粛鐨剆croll-margin灞炴€х殑鍊硷紝浠ｈ〃浣跨敤鐨勮竟璺濆皢妗嗗厓绱犳嫋鍔ㄥ埌鏄剧ず鍖哄煙鎷栧姩婊氬姩鍖哄煙鐨勮捣鐐广€傛嫋鍔ㄦ粴鍔ㄥ尯鍩熺敱鍙樻崲鍚庤竟妗嗗ぇ灏忕殑妗嗗厓绱犲喅瀹氾紝瀹冧細鎵惧埌妗嗗厓绱犵殑鐭╁舰杈圭晫锛堝湪婊氬姩瀹瑰櫒鐨勫潗鏍囩┖闂磋酱涓婏級锛屽苟娣诲姞鎸囧畾鐨勮捣鐐广€傝繖涓弿杩板緢瀹樻柟锛屼笉鐭ラ亾鍦ㄨ浠€涔堭煒傦紝鎵€浠ュソ涔呴兘涓嶇煡閬撹繖涓睘鎬х殑鐪熸鐢ㄩ€斻€傚湪涓婇潰鐨勪緥瀛愪腑锛屽彲浠ョ洿鎺ヨ缃畇croll-marginh2{scroll-margin:6rem;}涓虹洰鏍囥€傝缃繖涓睘鎬у悗锛屽綋鑷姩婊氬姩瀹氫綅鍒癶2鏃讹紝浼氳嚜鍔ㄩ鐣欎竴涓?rm鐨勯棿闅旓紙闃叉琚玥ead鎸′綇锛夛紝涓嬮潰鏄紨绀猴紙绾㈡琛ㄧず6rem鐨勯棿闅旓級鏄笉鏄緢绠€鍗曪紝鏈€缁堟晥鏋滃涓嬪叾瀹濵DN瀹樻柟宸茬粡閲囩敤浜嗚繖绉嶆柟寮忋€傚鏋滀綘缁忓父鐪婱DN锛屼綘浼氬彂鐜版湁寰堝寰堝阀濡欑殑瀹炵幇锛屽涓?.鑰宻croll-padding鍜宻croll-margin绫讳技锛岃繕鏈変竴涓猻croll-padding锛屽姛鑳芥槸涓€鏍风殑锛屼絾鏄痶arget鏄笉鍚岀殑銆傚墠闈㈢殑渚嬪瓙鍙互鐪嬪埌锛宻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閿仛鐒︾殑鎯呭喌銆俿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瀹氫綅銆佺劍鐐瑰畾浣嶃€丼croll-snap瀹氫綅浣撻獙灞炴€у寮猴紝鍏煎鎬ц繕涓嶉敊锛屼富瑕佹槸Safari姣旇緝钀藉悗
