鍓嶈█锛氫笂绡囧畬缁擆煄佸浣曞疄鐜板師鐢烰S鐨勬嫋鍔ㄦ晥鏋滄垜鍦∕ouseEvent浜嬩欢瀵硅薄涓婁娇鐢ㄤ簡clienX鐨勫睘鎬э紝浣嗘槸鍚屾椂褰撴椂鎴戜篃娉ㄦ剰鍒颁簨浠跺璞′笂鏈夊緢澶氬叧浜嶺鐨勭浉鍏冲睘鎬э紝鑰岃繖浜涘睘鎬у湪绉诲姩绔紑鍙戜腑闇€瑕佺粡甯哥敤鍒帮紝鎵€浠ユ垜浠€荤粨涓€涓嬭繖浜涘睘鎬у湪X杞翠笂鐨勪笉鍚屽惈涔夈€備竴銆佸墠鏈熷噯澶囧湪杩涜涓嬮潰鐨勫唴瀹逛箣鍓嶏紝甯屾湜澶у蹇樿浼犵粺鏁板鈥嬧€嬩腑鍧愭爣杞磞杞存柟鍚戝拰x杞存璐熻酱鏂瑰悜鐨勬蹇点€傚浜巆lient锛屼粬浠潗鏍囩郴鐨勬柟鍚戠暐鏈変笉鍚岋紝濡備笅鍥炬墍绀恒€傚師鍥犲叾瀹炲緢绠€鍗曘€備綘鎯充竴鎯筹紝瀵逛簬鐢ㄦ埛鏉ヨ锛屾湁鐢ㄧ殑鍖哄煙灏辨槸鎴戜滑鐨勬暣涓睆骞曘€傚鏋滆礋杞村凡缁忚秴鍑轰簡灞忓箷锛堜笅鍥句腑榛勮壊鍖哄煙锛夛紝鎴戜滑灏辨病鏈夌敤浜嗐€傚湪浠讳綍瀹為檯鎰忎箟涓娿€傛墍浠ヤ竴鑸潵璇达紝鍦ㄦ秹鍙婂埌灞忓箷鍧愭爣鐨勬椂鍊欙紝鎴戜滑榛樿鎸囧畾y鍧愭爣杞存槸浠庡乏涓嬭寮€濮嬪線涓嬭蛋銆備笂闈㈢殑瑙ｉ噴鍏跺疄涓嶆槸寰堜弗璋紝浣嗘槸鍙互璁╁ぇ瀹舵湁涓ぇ姒傜殑浜嗚В锛屼互渚夸簬鎴戜滑鍦ㄥ悗闈㈢殑灞炴€т笂杩涜璇存槑锛岃澶у鏈夋洿娣卞叆鐨勪簡瑙ｃ€備粖澶╂垜浠潵鍋氫竴涓偣鍑讳簨浠讹紝鎶婃垜浠殑鍚勭灞炴€у€煎甫杩涙潵銆傚彲浠ョ湅鍒板彸杈规湁寰堝鍏充簬X鍜孻鐨勫睘鎬с€傛帴涓嬫潵锛屾垜浠氨涓€涓€浜嗚В瀹冧滑鍒嗗埆浠ｈ〃浠€涔堛€?.ScreenX,ScreenY鍏跺疄浠嶴creen杩欎釜璇嶇殑鎰忔€濓紝灏卞彲浠ュぇ鑷寸寽鍑烘槸浠€涔堟剰鎬濅簡銆傗€滃睆鈥濆槢锛侀偅蹇呴』鐩稿浜庡睆骞曘€傝捣鍒濊鎴戞劅鍒板洶鎯戠殑鏄互涓嬫儏鍐点€傚綋鎴戠缉灏忔祻瑙堝櫒绐楀彛鏃讹紝杩欎釜screenY鏄惁浠ｈ〃绾跨殑璺濈锛燄煠旀潵楠岃瘉涓€涓嬭繖涓寽鎯筹紝鍙互鐪嬪埌铏界劧鎴戜滑鐨勬祻瑙堝櫒绐楀彛缂╁皬浜嗭紝浣嗘槸鎴戜滑鐨剆creenY渚濈劧浠ｈ〃浜嗘垜浠偣鍑荤殑閭ｄ釜鐐瑰埌鏁翠釜鐢佃剳灞忓箷鏄剧ず椤堕儴鐨勮窛绂汇€?銆丩ayerX鍜孡ayerY鐨勫睘鎬ч渶瑕佹牴鎹綅缃畾浣嶅嚑涓€兼潵鍖归厤锛岀湅鐪嬪尯鍒€傚ぇ鑷寸殑姒傚康鏄細濡傛灉鍏冪礌鏈韩鐨刾osition灞炴€т笉鏄潤鎬佺殑锛岄偅涔堝厓绱犵殑layer鏄浉瀵逛簬瀹冪殑宸︿笂瑙掑紑濮嬭绠楃殑銆傚涓嬪浘鎵€绀猴紝褰撴垜鍦ㄥ厓绱犲唴閮ㄥ崟鍑绘椂锛屽畠鐨刲ayerX鍜宭ayerY灏哄璁＄畻浠庡乏涓婅寮€濮嬨€傚悓鐞嗭紝濡傛灉娌℃湁璁剧疆瀹氫綅鐨勭浉鍏冲睘鎬э紝鍗冲厓绱犳湰韬殑position灞炴€ф槸闈欐€佺殑銆傜劧鍚庡畠浼氬悜涓婃煡鎵炬渶杩戠殑浣嶇疆涓嶆槸闈欐€佺殑鍏冪礌锛岀劧鍚庝粠鐩稿浜庤鍏冪礌宸︿笂瑙掔殑璺濈寮€濮嬭绠椼€傚鏋滄病鏈夛紝鍒欐悳绱㈡渶缁堜細鍦╞ody鏍囩澶勭粨鏉熴€?.clientX鍜宑lientY浠呮潵鑷猚lient涓€璇嶃€傚鏋滀綘鐪嬭繃鎴戜箣鍓嶇殑鏂囩珷锛岄偅涔堟垜鎯充綘澶ф鑳界寽鍒癱lienX鍜宑lientY鍒嗗埆浠ｈ〃浠€涔堛€備粬浠箣闂村叾瀹炰篃鏈夌浉浼间箣澶勶紝涓嶇劧涓轰粈涔堥兘鏄痗lient鍛紵鍦ㄨ繖涓満鏅笅锛宑lient杩欎釜璇嶅叾瀹炰唬琛ㄧ殑鏄鎴风鐨勫彲瑙佸尯鍩燂紙浠ｈ〃娴忚鍣ㄧ獥鍙ｏ級銆傚鏋滀綘杩樹笉娓呮浠€涔堟槸瀹㈡埛绔彲瑙佸尯鍩燂紝閭ｄ箞寮虹儓寤鸿浣犵偣寮€涓嬮潰杩欑瘒鏂囩珷浜嗚В涓€涓嬶紝灏ゅ叾鏄綘浠ュ悗鑰冭檻鎺ヨЕ绉诲姩绔紑鍙戠殑璇濓紝閭ｄ箞涓嬮潰涓夌瘒灞炴€ф槸浣犲繀椤荤煡閬撶殑鐭ヨ瘑鐐广€傪煫变綘蹇呴』鐭ラ亾clientWidth銆乷ffsetWidth銆乻crollWidth銆傚洖鍒癱lientX鍜宑lientY锛岃繖閲岄€氳繃娓呮櫚鐨勫姣斿憡璇夊ぇ瀹朵竴涓蹇碉細杩欎袱涓€煎彧鍏冲績鐢ㄦ埛鍦ㄥ綋鍓嶅睆骞曪紙娴忚鍣ㄧ獥鍙ｏ級涓婂彲浠ョ湅鍒扮殑鍖哄煙锛岃€屼粠涓绠楄窛绂诲綋鍓嶅尯鍩熺殑宸︿笂瑙掋€備粈涔堟剰鎬濓紵鎴戜滑閮界煡閬擄紝褰撳唴瀹圭殑瀹藉害鎴栭珮搴﹁秴杩囩埗瀹瑰櫒璁剧疆鐨勫搴﹀拰楂樺害鏃讹紝灏变細鍙戠敓婧㈠嚭銆傚父瑙佺殑澶勭悊overflow鐨勬柟妗堟槸璁剧疆瀹冪殑overflow灞炴€э紝姣斿overflow-auto绛夈€傛垜浠厛鍒涘缓涓€涓猳verflow鐨勫満鏅紝鎴戝湪椤甸潰涓婃樉绀篶lientX鐨勫€笺€傚彲浠ョ湅鍒版垜鍦ㄦ粦鍔ㄧ殑鏃跺€欏叾瀹炲凡缁忕偣鍑讳簡澶氭瑙﹀彂浜唎nMouseDown浜嬩欢锛屼絾鏄浜庢垜浠潵璇达紝鎴戜滑鑳界湅鍒扮殑鍖哄煙鍙槸瀹瑰櫒鏈€宸﹁竟鐨勯儴鍒嗐€傦紙鎴戜滑鐪嬩笉鍒版孩鍑虹殑閮ㄥ垎锛屾垜浠殑client涓嶅叧蹇冩孩鍑洪儴鍒嗙殑璺濈銆傦級鍚屾牱锛宑lientY涓嶅叧蹇冩孩鍑虹殑閮ㄥ垎锛屽彧鍏冲績鑳界湅鍒扮殑閮ㄥ垎銆?.PageX锛孭ageY浠庝笂闈㈠垰鍒氭彁鍒扮殑clientY鍜宑lientX鏉ヨ锛屼粬浠苟涓嶅叧蹇冩孩鍑虹殑閮ㄥ垎銆傛湁浜哄叧蹇冩孩鍑鸿窛绂荤殑閮ㄥ垎鍚楋紵鍒鐪熺殑鏈夛紝閭ｅ氨鏄痯ageX鍜宲ageY銆傚洜涓鸿繖涓睘鎬ф槸鐩稿浜庢暣涓枃妗ｇ殑宸︿笂瑙掓潵璁＄畻鐨勶紝鎵€浠ユ垜浠笂闈㈢殑婧㈠嚭渚嬪瓙骞朵笉鑳借Е鍙戣繖涓睘鎬х殑鍙樺寲銆傛垜浠繖閲屼娇鐢∕DN椤甸潰鏉ヨВ閲娿€備粠涓婇潰clientY鐨勭煡璇嗘垜浠彲浠ョ煡閬擄紝褰撴垜浠殑椤甸潰涓嶆粴鍔ㄧ殑鏃跺€欙紝杩欎釜璺濈鍏跺疄灏辨槸clientY鐨勮窛绂汇€備綘鍙兘浼氭兂锛屽鎬紝鎴戜滑涓嶆槸鍦ㄨ皥璁篜ageY鍚楋紵涓轰粈涔堝張鍥炲埌浜哻lientY锛熷叾瀹炰竴鐐逛篃涓嶅鎬紝鍦ㄨ繖绉嶆儏鍐典笅锛屾垜浠殑pageY鍜宑lientY鏄畬鍏ㄤ竴鏍风殑锛屾病鏈夊尯鍒€備絾锛佷竴鏃﹀嚭鐜颁互涓嬫儏鍐碉紝椤甸潰灏变細鍥犱负鍐呭婧㈠嚭鑰屾粴鍔ㄣ€傚涓嬪浘鎵€绀猴細閭ｄ箞鎴戜滑鐨凱ageY灞炴€ц褰曠殑鍊煎氨鍙樻垚浜嗘粴鍔ㄨ窛绂?clientY璺濈銆傚鏋滀綘鐭ラ亾scroTop浠ｈ〃浠€涔堬紝閭ｄ箞浣犲彲浠ュ緢蹇緱鍒颁笅闈㈢殑璁＄畻鏂规硶銆俻ageY=scroTop+clientY濡傛灉浣犺繕涓嶄簡瑙croTop锛屾病鍏崇郴锛屽氨鍍忔垜涔嬪墠璇寸殑锛屼綘鍙互鐐瑰嚮杩欓噷鑷繁瀛︿範銆傪煫卞叧浜庝娇鐢╯crollTop瀹屾垚鏍囩鏍忕殑浜や簰pageX锛屾按骞虫柟鍚戞孩鍑烘椂涔熸槸濡傛锛岃繖閲屼笉鍐嶈禈杩般€?.瀵逛簬offsetX鍜宱ffsetY锛屾垜浠洖褰掓渶鍩烘湰鐨勬牱寮忋€傛鏃堕粦鑹插潡娌℃湁浠讳綍杈规灞炴€с€傞偅涔堟鏃剁殑offsetX鍜宱ffsetY浠ｈ〃鐨勬槸璺濈鑷韩宸︿笂瑙掔殑璺濈銆傚鏋滆繖鏃跺€欐垜浠姞涓婁竴涓?0px鐨勮竟妗嗭紝鎯呭喌灏变細鍙戠敓鍙樺寲銆傝仾鏄庣殑浣犲彲鑳藉凡缁忕湅鍒颁簡锛屽叾璧风偣鐨勮绠楀皢杈规鐨勫搴﹀悜鍐呭帇缂┿€傝繖閲屽叾瀹炶繕鏈変竴涓叧閿煡璇嗙偣銆備笉鐭ラ亾浣犳湁娌℃湁鍙戠幇銆傝繖涓睘鎬у拰layerX鍜宭ayerY寰堢浉浼笺€傛垜浠潵娴嬭瘯涓€涓嬶紝褰撳厓绱犳湰韬缃负relative鏃讹紝瀹冪殑layer灞炴€т篃鏄浉瀵逛簬鑷韩寮€濮嬬殑銆俹ffsetX鍜宭ayerX鏈夊尯鍒悧锛熺瓟妗堝湪杩欓噷鐩存帴鎻檽銆傚嵆浣挎垜浠缃簡杈规锛屽浘灞傜殑灞炴€т篃涓嶄細鍙楀埌浠讳綍褰卞搷锛岃窛绂讳粛鐒舵槸浠庡厓绱犵殑宸︿笂瑙掑紑濮嬭绠楃殑銆?.X鍜孻鏄殑锛屼綘娌＄湅閿欙紝灏辨槸杩欎袱涓瓧姣嶏紝浣嗚繖涓や釜灞炴€ф槸纭疄瀛樺湪鐨勩€傛煡鐪嬪悗鍙互鐪嬪嚭鍏跺疄灏辨槸clientX锛岃繖閲屼笉鍐嶈禈杩般€?.鎬荤粨锛氭湰鏂囨槸鏍规嵁鑷繁闅忔墜鍋氱殑绗旇鏀圭紪鑰屾潵銆傜瑪璁板唴瀹规瘮杈冪矖绯欍€傝浆鎴愭枃绔犲悗锛屼釜浜烘劅瑙夊張澶嶄範浜嗕竴閬嶏紝鍔犳繁浜嗗嵃璞°€傚鏋滆繖绡囨枃绔犺兘甯姪鍒颁竴浜涗汉锛岄偅鏄竴浠跺垢浜嬨€傚彲鑳戒互鍚庝細缁忓父鐪嬫垜鐨勮繖绡囨枃绔狅綖杩欎簺灞炴€х湡鐨勫緢瀹规槗娣锋穯馃
