鍓嶈█锛氳嚜浠庡紑濮嬩娇鐢ㄦ帢閲戜互鏉ワ紝涓€鐩村鎺橀噾PC绔拰绉诲姩绔痶abs鐨勫疄鐜板厖婊″ソ濂囥€傛粴鍔ㄩ〉闈㈡椂鍒朵綔浜や簰鏁堟灉涓€鐩存槸鎴戠殑寮遍」銆備絾鐩墠鍏徃椤圭洰鐨勬牳蹇冧富瑕佽繕鏄互绉诲姩绔负涓汇€傚鏋滀綘瀵硅繖閮ㄥ垎娌℃湁涓€瀹氱殑浜嗚В锛屼綘鏄仛涓嶅嚭涓€浜涜垝鏈嶇殑浜や簰閫昏緫鐨勩€傛墍浠ヤ粖澶╃壒鎰忔娊绌虹爺绌朵簡涓€涓嬬浉鍏冲師鐞嗐€傛湁寰堝鏂规硶鍙互杈惧埌杩欑鏁堟灉銆傛垜鍙細瑙ｉ噴鎴戝鍒扮殑涓€绉嶆柟娉曘€傚厛棰勮涓€涓嬫渶缁堟晥鏋滃浘锛?.鍒嗘瀽闇€姹備笅闈互PC绔负渚嬪垎鏋愪笅瑕佽璁虹殑鍐呭銆傚彲浠ユ竻妤氬湴鐪嬪埌锛岄椤甸《閮ㄧ殑Tab鍦ㄦ垜浠粴鍔ㄦ椂鑷姩闅愯棌浜嗐€傝繖鏄垵濮嬬姸鎬侊紝椤甸潰杩樻病鏈夋粴鍔紝椤堕儴鍙湁涓€涓猅ab銆傝繖鏄竴涓腑闂寸姸鎬侊紝鍦ㄦ煇涓椂鍒讳袱涓猅ab鍚屾椂瀛樺湪銆傝繖鏄渶缁堢姸鎬併€傚綋椤甸潰婊氬姩鍒版煇涓复鐣屽€兼椂锛屽彧鍓╀笅澶村儚Tab銆?.鍑嗗宸ヤ綔鎴戜滑棣栧厛鍒涘缓涓€涓畝鍗曠殑鍙互婊氬姩鐨勫満鏅€傦紙浣犱篃鍙互鐩存帴鍦ㄦ簮鐮佹爣棰橀噷澶嶅埗鎴戠殑浠ｇ爜锛屽墠鎻愭槸浣犱篃鍦ㄤ娇鐢║noCSS銆傚鏋滀綘涓嶇煡閬撳浣曚娇鐢║noCSS锛屼綘鍙互鐐瑰嚮涓嬮潰鐨勬枃绔犮€傦級馃馃巵鏁欎綘濡備綍鍒涘缓浣犵殑鑷繁鐨勪唬鐮佸瓨鍌ㄥ簱锛変笅闈㈡槸鎴戜滑褰撳墠鐨勭姸鎬侊紝娌℃湁鍋氫换浣曞搷搴旀粴鍔ㄣ€傜浉淇″ぇ閮ㄥ垎璇昏€呴兘闈炲父娓呮锛屽綋鎴戜滑鐨勯〉闈㈡粴鍔ㄦ椂锛屾粴鍔ㄥ厓绱犱細瑙﹀彂涓€涓猳nScroll浜嬩欢銆傝繖涓簨浠朵篃缁忓父琚敤鏉ヤ綔涓洪槻鎶栧拰鎷︽埅鐨勪緥瀛愶紝浣嗘槸浠婂ぉ鎴戜滑涓嶈€冭檻闃叉姈鍜孋losure锛屾垜浠厛鐢ㄨ繖涓簨浠舵槸濡備綍瑙﹀彂鐨勩€傛偍闇€瑕佸皢鍥炶皟鍑芥暟缁戝畾鍒版偍璁剧疆婧㈠嚭鑷姩鐨勫厓绱犮€傚綋椤甸潰婊氬姩鏃讹紝璇ュ嚱鏁颁細琚纭Е鍙戯紝杩欎篃鏄垜浠繖绡囨枃绔犵殑閲嶇偣銆傛濡備綘鎵€鐪嬪埌鐨勶紝褰撴垜婊氬姩椤甸潰鏃讹紝杩欎釜鍑芥暟姝ｅ湪琚Е鍙戯紝骞朵笖瑙﹀彂棰戠巼闈炲父蹇€?.scrollTop杩欓噷瑕佺煡閬撳綋scroll浜嬩欢琚Е鍙戞椂锛屽洖璋冨嚱鏁颁細琚紶鍏ヤ竴涓簨浠跺弬鏁般€俥鐨則arget灞炴€ф寚鐨勬槸姝ｅ湪婊氬姩鐨勫厓绱犮€傚畠鏈変竴涓潪甯搁噸瑕佺殑灞炴€э紝灏辨槸鎴戜滑浠婂ぉ鐨勪富瑙抯crollTop銆傛垜浠洿鎺ユ墦鍗板嚭鏉ョ湅鐪嬭繖涓睘鎬ф槸濡備綍鍙樺寲鐨勩€傚鏋滀綘寰堣仾鏄庯紝浣犲緢蹇氨浼氬彂鐜板畠瀹為檯涓婁唬琛ㄤ簡鎴戜滑瀹為檯婊氬姩鐨勮窛绂汇€傛洿鍑嗙‘鍦拌锛屽畠琛ㄧず鎴戜滑鐨勬粴鍔ㄥ厓绱犺窛椤甸潰椤堕儴鐨勮窛绂汇€傛棦鐒舵垜浠煡閬撲簡椤甸潰鐨勫疄闄呮粴鍔ㄨ窛绂伙紝涔熺煡閬撲簡杩欎袱涓猅ab鐨勫叿浣撻珮搴︼紝閭ｄ箞鎴戜滑灏卞彲浠ュ湪鍚堥€傜殑鏃跺€欐搷浣滆繖涓や釜鍏冪礌鐨勫睘鎬э紝璁╁畠鍝嶅簲鎴戜滑椤甸潰鍏紡鐨勫彉鍖栥€傛垜浠厛缁欒繖涓や釜Tabs璧蜂袱涓悕瀛楋紝骞舵爣娉ㄥ搴旂殑ref锛屽洜涓烘帴涓嬫潵鎴戜滑浼氶绻佹搷浣滆繖涓や釜鍏冪礌鐨勬牱寮忋€?銆佸疄鐜伴〉闈㈡粴鍔ㄥ搷搴斿紡瀹℃牳绗竴绉嶇姸鎬侊紝椤甸潰涓嶆粴鍔紝涓嶆樉绀烘垜浠殑澶村儚鏍囩銆傝鎴戜滑閲嶆柊璁捐杩欓噷鐨勬牱寮忥紝灏嗘垜浠殑鎼滅储鍒囨崲涓虹疆椤讹紝骞惰缃畉op-0浠ヤ究瀹冨彲浠ヤ粠涓€寮€濮嬪氨鍥哄畾鍦ㄦ垜浠〉闈㈢殑椤堕儴銆傜劧鍚庣粰澶村儚鍔犵偣闂磋窛锛屼竴浼氬効鎴戜滑瑕佸仛婊氬姩銆傚搴旂殑椤甸潰鏁堟灉濡備笅锛氬叾瀹炶繖閲屾垜浠渶瑕佺敤鍒颁竴涓妧宸э紝鎴戜滑闇€瑕佺粰鎼滅储鏍忚缃竴涓厔寮熷厓绱狅紝杩欎釜鍏勫紵鍏冪礌鐨勫睘鎬у拰鎴戜滑鐨勫ご鍍忔爮鏄畬鍏ㄤ竴鏍风殑銆傦紙鎸囩浉鍚岀殑鏍峰紡鍜屽姛鑳斤級鎵€浠ヤ綘褰撳墠鐨勯〉闈㈠簲璇ユ槸杩欐牱鐨勩€傞鍏堣鏄庣‘鐨勬槸锛屼竴寮€濮嬫病鏈夋粴鍔ㄥ埌涓寸晫鍊兼椂锛屽ご鍍忕1鏍忔槸涓嶄細鏄剧ず鐨勩€傝繖閲屾垜浠粰瀹冭缃竴涓猳pacity-0锛岃瀹冪殑閫忔槑搴︿负0銆傛帴涓嬫潵瑕佸仛鐨勪簨鎯呭氨寰堢畝鍗曚簡锛屾垜浠潵鐪嬬湅杩欓噷鎺橀噾鐨勬晥鏋溿€傝繖閲屾垜浠湅鍒颁細鍚屾椂鍑虹幇涓ゅ抚锛屾墍浠ュ彲浠ヨ绠楀嚭鎴戜滑婊氬姩鐨勬渶灏忓€笺€傛牴鎹笂鍥炬垜浠彲浠ョ煡閬擄紝褰撴垜浠粴鍔?00px(margin-top)+70px鏃讹紝鎭板ソ鎼滅储鎺ヨЕ鍒颁簡澶村儚鏍忕殑椤堕儴銆傞偅鎴戜滑杩欐椂鍊欎笉鍋氫换浣曢檺鍒讹紝缁х画鎶婂ご鍍忔爮2鐨勯珮搴﹀線涓嬫粴鍔?0px銆傞偅涔堟鏃堕〉闈㈠彧浼氳鐩栧ご鍍忔爮2锛屽鍚э紵涓轰簡鏂逛究灞曠ず锛屾垜璐翠笂浜唖crollTop鐨勫€笺€傦紙杩欓噷鏈変竴鐐圭偣閿欒锛屽洜涓烘垜鐨勬粴杞笉鏄壒鍒鏄撴粴鍔ㄥ埌閭ｄ釜鍊笺€傦級5.瀹炵幇椤堕儴杞崲寮€鍏宠繖閲屾垜浠渶瑕佹坊鍔犱竴涓彉閲廼sShow锛屾垜浠缃ご鍍忔爮鐨勯€忔槑搴︽牱寮?:鏍峰紡浣垮姩鎬佸垏鎹㈡垚涓哄彲鑳姐€傛鏃剁殑椤甸潰鏁堟灉搴旇鏄繖鏍风殑锛氭垜浠彲浠ョ湅鍒帮紝褰撴垜浠粴鍔ㄥ埌瀹屽叏鐪嬩笉鍒板ご鍍忕2鏍忕殑鏃跺€欙紝鎴戜滑鍙渶瑕佸皢澶村儚绗?鏍忕殑閫忔槑搴︽敼涓?鍗冲彲瀹炵幇涓€绉嶇被浼间簬娆洪獥鐢ㄦ埛鐪肩潧鐨勬劅瑙夈€傚ソ鍍忓張闄勪笂浜嗗ご鍍忔爮2銆傛鏃惰繕宸渶鍚庝竴姝ワ紝鎼滅储鏍忎笂绉伙紝鍙樉绀哄ご鍍忔爮1銆傞偅涔堟帴涓嬫潵瑕佸仛鐨勪簨鎯呭氨闈炲父闈炲父绠€鍗曚簡锛岃繖鏃跺€欒鎼滅储鏍忚嚜宸卞線涓婄Щ鍔ㄤ竴涓珮搴﹀氨鍙互浜嗐€傛晥鏋滃涓嬶細鍡€︹€︽晥鏋滄湁鐐圭敓纭紝鎴戜滑鍔犱釜绠€鍗曠殑杩囨浮锛岃鎼滅储娑堝け涓嶉偅涔堢敓纭€傛渶缁堟晥鏋滃涓嬶細鍏€傛簮鐮?scriptsetuplang="ts">import{ref}from"vue";constscrollTop=ref
