ਦ੍ਰਿਸ਼ ਲਗਭਗ ਹਮੇਸ਼ਾ ਇੱਕੋ ਜਿਹਾ ਹੁੰਦਾ ਹੈ, ਜੋ ਇੱਕ ਸਕ੍ਰੋਲ ਕਰਨ ਯੋਗ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਇੱਕ ਡਾਟਾ ਸਾਰਣੀ ਹੈ। ਹਰ ਕਤਾਰ ਵਿੱਚ ਇੱਕ ਐਕਸ਼ਨ ਮੀਨੂ, ਕੁਝ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਇੱਕ ਛੋਟਾ ਡ੍ਰੌਪਡਾਉਨ ਹੁੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸੰਪਾਦਨ, ਡੁਪਲੀਕੇਟ ਅਤੇ ਮਿਟਾਓ। ਤੁਸੀਂ ਇਸਨੂੰ ਬਣਾਉਂਦੇ ਹੋ, ਇਹ ਇਕੱਲਤਾ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਜਾਪਦਾ ਹੈ, ਅਤੇ ਫਿਰ ਕੋਈ ਇਸਨੂੰ ਉਸ ਸਕ੍ਰੌਲਯੋਗ ਡਿਵ ਦੇ ਅੰਦਰ ਰੱਖਦਾ ਹੈ ਅਤੇ ਚੀਜ਼ਾਂ ਵੱਖ ਹੋ ਜਾਂਦੀਆਂ ਹਨ। ਮੈਂ ਇਸ ਸਹੀ ਬੱਗ ਨੂੰ ਤਿੰਨ ਵੱਖ-ਵੱਖ ਕੋਡਬੇਸਾਂ ਵਿੱਚ ਦੇਖਿਆ ਹੈ: ਕੰਟੇਨਰ, ਸਟੈਕ, ਅਤੇ ਫਰੇਮਵਰਕ, ਸਾਰੇ ਵੱਖਰੇ। ਬੱਗ, ਹਾਲਾਂਕਿ, ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਾਨ ਹੈ। ਡ੍ਰੌਪਡਾਊਨ ਕੰਟੇਨਰ ਦੇ ਕਿਨਾਰੇ 'ਤੇ ਕੱਟਿਆ ਜਾਂਦਾ ਹੈ। ਜਾਂ ਇਹ ਉਸ ਸਮਗਰੀ ਦੇ ਪਿੱਛੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਜੋ ਤਰਕ ਨਾਲ ਇਸਦੇ ਹੇਠਾਂ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ. ਜਾਂ ਇਹ ਉਦੋਂ ਤੱਕ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਉਪਭੋਗਤਾ ਸਕ੍ਰੋਲ ਨਹੀਂ ਕਰਦਾ, ਅਤੇ ਫਿਰ ਇਹ ਵਹਿ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ z-ਇੰਡੈਕਸ ਲਈ ਪਹੁੰਚਦੇ ਹੋ: 9999। ਕਈ ਵਾਰ ਇਹ ਮਦਦ ਕਰਦਾ ਹੈ, ਪਰ ਕਈ ਵਾਰ ਇਹ ਬਿਲਕੁਲ ਕੁਝ ਨਹੀਂ ਕਰਦਾ। ਇਹ ਅਸੰਗਤਤਾ ਪਹਿਲਾ ਸੰਕੇਤ ਹੈ ਕਿ ਕੁਝ ਡੂੰਘਾ ਹੋ ਰਿਹਾ ਹੈ. ਇਸਦੇ ਵਾਪਸ ਆਉਣ ਦਾ ਕਾਰਨ ਇਹ ਹੈ ਕਿ ਤਿੰਨ ਵੱਖਰੇ ਬ੍ਰਾਊਜ਼ਰ ਸਿਸਟਮ ਸ਼ਾਮਲ ਹਨ, ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਡਿਵੈਲਪਰ ਹਰ ਇੱਕ ਨੂੰ ਆਪਣੇ ਆਪ ਸਮਝਦੇ ਹਨ ਪਰ ਇਹ ਕਦੇ ਨਹੀਂ ਸੋਚਦੇ ਕਿ ਕੀ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤਿੰਨੋਂ ਟਕਰਾ ਜਾਂਦੇ ਹਨ: ਓਵਰਫਲੋ, ਸਟੈਕਿੰਗ ਪ੍ਰਸੰਗ, ਅਤੇ ਬਲਾਕ ਰੱਖਣ ਵਾਲੇ।
ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਸਮਝ ਲੈਂਦੇ ਹੋ ਕਿ ਤਿੰਨੋਂ ਕਿਵੇਂ ਪਰਸਪਰ ਕ੍ਰਿਆ ਕਰਦੇ ਹਨ, ਅਸਫਲ ਮੋਡ ਬੇਤਰਤੀਬ ਮਹਿਸੂਸ ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੰਦੇ ਹਨ। ਅਸਲ ਵਿੱਚ, ਉਹ ਭਵਿੱਖਬਾਣੀ ਬਣ ਜਾਂਦੇ ਹਨ. ਤਿੰਨ ਚੀਜ਼ਾਂ ਅਸਲ ਵਿੱਚ ਇਸਦਾ ਕਾਰਨ ਬਣ ਰਹੀਆਂ ਹਨ ਆਉ ਇਹਨਾਂ ਵਿੱਚੋਂ ਹਰੇਕ ਆਈਟਮ ਨੂੰ ਵਿਸਥਾਰ ਵਿੱਚ ਵੇਖੀਏ. ਓਵਰਫਲੋ ਸਮੱਸਿਆ ਜਦੋਂ ਤੁਸੀਂ ਓਵਰਫਲੋ ਸੈਟ ਕਰਦੇ ਹੋ: ਲੁਕਿਆ ਹੋਇਆ, ਓਵਰਫਲੋ: ਸਕ੍ਰੌਲ, ਜਾਂ ਓਵਰਫਲੋ: ਕਿਸੇ ਤੱਤ 'ਤੇ ਆਟੋ, ਬ੍ਰਾਊਜ਼ਰ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਨੂੰ ਕਲਿੱਪ ਕਰੇਗਾ ਜੋ ਇਸਦੀਆਂ ਸੀਮਾਵਾਂ ਤੋਂ ਪਰੇ ਹੈ, ਬਿਲਕੁਲ ਸਥਿਤੀ ਵਾਲੇ ਉੱਤਰਾਧਿਕਾਰੀਆਂ ਸਮੇਤ। .scroll-container { ਓਵਰਫਲੋ: ਆਟੋ; ਉਚਾਈ: 300px; /* ਇਹ ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਕਲਿਪ ਕਰੇਗਾ, ਫੁੱਲ ਸਟਾਪ */ }
.ਡਰਾਪਡਾਊਨ { ਸਥਿਤੀ: ਪੂਰਨ; /* ਕੋਈ ਫ਼ਰਕ ਨਹੀਂ ਪੈਂਦਾ -- ਅਜੇ ਵੀ .scroll-container */ ਦੁਆਰਾ ਕਲਿਪ ਕੀਤਾ ਗਿਆ ਹੈ }
ਇਸਨੇ ਮੈਨੂੰ ਪਹਿਲੀ ਵਾਰ ਹੈਰਾਨ ਕਰ ਦਿੱਤਾ ਜਦੋਂ ਮੈਂ ਇਸ ਵਿੱਚ ਭੱਜਿਆ। ਮੈਂ ਸਥਿਤੀ ਨੂੰ ਮੰਨ ਲਿਆ ਸੀ: ਪੂਰਨ ਤੱਤ ਇੱਕ ਕੰਟੇਨਰ ਦੀ ਕਲਿੱਪਿੰਗ ਤੋਂ ਬਚਣ ਦੇਵੇਗਾ। ਇਹ ਨਹੀਂ ਹੈ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇੱਕ ਬਿਲਕੁਲ ਸਥਿਤੀ ਵਾਲੇ ਮੀਨੂ ਨੂੰ ਕਿਸੇ ਵੀ ਪੂਰਵਜ ਦੁਆਰਾ ਕੱਟਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜਿਸਦਾ ਇੱਕ ਗੈਰ-ਦਿੱਖ ਓਵਰਫਲੋ ਮੁੱਲ ਹੈ, ਭਾਵੇਂ ਉਹ ਪੂਰਵਜ ਮੇਨੂ ਵਿੱਚ ਸ਼ਾਮਲ ਬਲਾਕ ਨਾ ਹੋਵੇ। ਕਲਿੱਪਿੰਗ ਅਤੇ ਪੋਜੀਸ਼ਨਿੰਗ ਵੱਖਰੇ ਸਿਸਟਮ ਹਨ। ਉਹ ਸਿਰਫ਼ ਉਹਨਾਂ ਤਰੀਕਿਆਂ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬੇਤਰਤੀਬ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਦੋਵਾਂ ਨੂੰ ਸਮਝ ਨਹੀਂ ਲੈਂਦੇ.
CreatePortal ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਥੇ ਇੱਕ ਪ੍ਰਤੀਕਿਰਿਆ ਉਦਾਹਰਨ ਹੈ:
'react-dom' ਤੋਂ { createPortal } ਨੂੰ ਆਯਾਤ ਕਰੋ; 'react' ਤੋਂ { useState, useEffect, useRef } ਨੂੰ ਆਯਾਤ ਕਰੋ;
ਫੰਕਸ਼ਨ ਡ੍ਰੌਪਡਾਉਨ ({ anchorRef, isOpen, Children }) { const [position, setPosition] = useState({ top: 0, left: 0 });
useEffect(() => { ਜੇਕਰ (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); ਸੈੱਟਪੁਜੀਸ਼ਨ({ ਸਿਖਰ: rect.bottom + window.scrollY, ਖੱਬੇ: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ਜੇਕਰ (!isOpen) ਰਿਟਰਨ null;
ਵਾਪਸੀ createportal(
ਅਤੇ, ਬੇਸ਼ੱਕ, ਅਸੀਂ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਸਥਿਰ ਤੱਤ ਜੋ ਸਮੱਗਰੀ ਉੱਤੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਅਜੇ ਵੀ ਕੀਬੋਰਡ-ਪਹੁੰਚਯੋਗ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਜੇਕਰ ਫੋਕਸ ਆਰਡਰ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਸਥਿਰ ਡ੍ਰੌਪਡਾਉਨ ਵਿੱਚ ਨਹੀਂ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਇਹ ਵੀ ਜਾਂਚਣ ਯੋਗ ਹੈ ਕਿ ਇਹ ਕਿਸੇ ਹੋਰ ਇੰਟਰਐਕਟਿਵ ਸਮਗਰੀ 'ਤੇ ਨਹੀਂ ਬੈਠਦਾ ਹੈ ਜਿਸ ਨੂੰ ਖਾਰਜ ਕਰਨ ਦਾ ਕੋਈ ਤਰੀਕਾ ਨਹੀਂ ਹੈ। ਉਹ ਤੁਹਾਨੂੰ ਕੀਬੋਰਡ ਟੈਸਟਿੰਗ ਵਿੱਚ ਕੱਟਦਾ ਹੈ। CSS ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ: ਜਿੱਥੇ ਮੈਂ ਸੋਚਦਾ ਹਾਂ ਕਿ ਇਹ ਸਿਰਲੇਖ ਹੈ CSS ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਉਹ ਦਿਸ਼ਾ ਹੈ ਜਿਸ ਵਿੱਚ ਮੈਂ ਇਸ ਸਮੇਂ ਸਭ ਤੋਂ ਵੱਧ ਦਿਲਚਸਪੀ ਰੱਖਦਾ ਹਾਂ। ਮੈਨੂੰ ਪੱਕਾ ਪਤਾ ਨਹੀਂ ਸੀ ਕਿ ਜਦੋਂ ਮੈਂ ਇਸ ਨੂੰ ਪਹਿਲੀ ਵਾਰ ਦੇਖਿਆ ਸੀ ਤਾਂ ਅਸਲ ਵਿੱਚ ਕਿੰਨੀ ਕੁ ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਤੀ ਜਾ ਸਕਦੀ ਸੀ। ਇਹ ਤੁਹਾਨੂੰ ਸਿੱਧੇ CSS ਵਿੱਚ ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਅਤੇ ਇਸਦੇ ਟਰਿੱਗਰ ਦੇ ਵਿਚਕਾਰ ਸਬੰਧਾਂ ਦਾ ਐਲਾਨ ਕਰਨ ਦਿੰਦਾ ਹੈ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਕੋਆਰਡੀਨੇਟਸ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ। .trigger { ਐਂਕਰ-ਨਾਮ: --ਮੇਰਾ-ਟਰਿੱਗਰ; }
.ਡ੍ਰੌਪਡਾਉਨ-ਮੇਨੂ { ਸਥਿਤੀ: ਪੂਰਨ; ਸਥਿਤੀ-ਐਂਕਰ: --ਮਾਈ-ਟਰਿੱਗਰ; ਸਿਖਰ: ਐਂਕਰ (ਹੇਠਾਂ); ਖੱਬਾ: ਐਂਕਰ (ਖੱਬੇ); ਸਥਿਤੀ-ਅਜ਼ਮਾਓ-ਫਾਲਬੈਕਸ: ਫਲਿੱਪ-ਬਲਾਕ, ਫਲਿੱਪ-ਇਨਲਾਈਨ; }
ਪੁਜ਼ੀਸ਼ਨ-ਟ੍ਰਾਈ-ਫਾਲਬੈਕਸ ਪ੍ਰਾਪਰਟੀ ਉਹ ਹੈ ਜੋ ਮੈਨੂਅਲ ਕੈਲਕੂਲੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਹਾਰ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ ਵਿਕਲਪਕ ਪਲੇਸਮੈਂਟ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ, ਇਸਲਈ ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਕੱਟੇ ਜਾਣ ਦੀ ਬਜਾਏ ਆਪਣੇ ਆਪ ਉੱਪਰ ਵੱਲ ਫਲਿਪ ਹੋ ਜਾਂਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ Chromium-ਅਧਾਰਿਤ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਠੋਸ ਹੈ ਅਤੇ Safari ਵਿੱਚ ਵਧ ਰਿਹਾ ਹੈ। ਫਾਇਰਫਾਕਸ ਨੂੰ ਪੌਲੀਫਿਲ ਦੀ ਲੋੜ ਹੈ। @oddbird/css-anchor-positioning ਪੈਕੇਜ ਕੋਰ ਸਪੈਕਸ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ। ਮੈਂ ਇਸਦੇ ਨਾਲ ਲੇਆਉਟ ਕਿਨਾਰੇ ਦੇ ਕੇਸਾਂ ਨੂੰ ਹਿੱਟ ਕੀਤਾ ਹੈ ਜਿਸ ਵਿੱਚ ਫਾਲਬੈਕ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਿਸਦੀ ਮੈਂ ਉਮੀਦ ਨਹੀਂ ਕੀਤੀ ਸੀ, ਇਸਲਈ ਇਸਨੂੰ ਇੱਕ ਪ੍ਰਗਤੀਸ਼ੀਲ ਸੁਧਾਰ ਵਜੋਂ ਮੰਨੋ ਜਾਂ ਇਸਨੂੰ ਇੱਕ ਨਾਲ ਜੋੜੋਫਾਇਰਫਾਕਸ ਲਈ JavaScript ਫਾਲਬੈਕ। ਸੰਖੇਪ ਵਿੱਚ, ਹੋਨਹਾਰ ਪਰ ਅਜੇ ਤੱਕ ਸਰਵ ਵਿਆਪਕ ਨਹੀਂ। ਆਪਣੇ ਨਿਸ਼ਾਨਾ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਟੈਸਟ. ਅਤੇ ਜਿੱਥੋਂ ਤੱਕ ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਸਬੰਧ ਹੈ, CSS ਵਿੱਚ ਇੱਕ ਵਿਜ਼ੂਅਲ ਰਿਸ਼ਤਾ ਘੋਸ਼ਿਤ ਕਰਨਾ ਅਸੈਸਬਿਲਟੀ ਟ੍ਰੀ ਨੂੰ ਕੁਝ ਨਹੀਂ ਦੱਸਦਾ ਹੈ। aria-controls, aria-expanded, aria-haspopup — ਉਹ ਹਿੱਸਾ ਅਜੇ ਵੀ ਤੁਹਾਡੇ 'ਤੇ ਹੈ। ਕਈ ਵਾਰ ਫਿਕਸ ਸਿਰਫ ਤੱਤ ਨੂੰ ਹਿਲਾ ਰਿਹਾ ਹੈ ਕਿਸੇ ਪੋਰਟਲ 'ਤੇ ਪਹੁੰਚਣ ਜਾਂ ਤਾਲਮੇਲ ਦੀ ਗਣਨਾ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਮੈਂ ਹਮੇਸ਼ਾ ਪਹਿਲਾਂ ਇੱਕ ਸਵਾਲ ਪੁੱਛਦਾ ਹਾਂ: ਕੀ ਇਸ ਡਰਾਪਡਾਊਨ ਨੂੰ ਅਸਲ ਵਿੱਚ ਸਕ੍ਰੌਲ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਰਹਿਣ ਦੀ ਲੋੜ ਹੈ? ਜੇਕਰ ਅਜਿਹਾ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਮਾਰਕਅੱਪ ਨੂੰ ਉੱਚ-ਪੱਧਰੀ ਰੈਪਰ 'ਤੇ ਲਿਜਾਣ ਨਾਲ ਸਮੱਸਿਆ ਪੂਰੀ ਤਰ੍ਹਾਂ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ, ਬਿਨਾਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਅਤੇ ਕੋਈ ਤਾਲਮੇਲ ਗਣਨਾਵਾਂ ਨਹੀਂ। ਇਹ ਹਮੇਸ਼ਾ ਸੰਭਵ ਨਹੀਂ ਹੁੰਦਾ। ਜੇਕਰ ਬਟਨ ਅਤੇ ਡ੍ਰੌਪਡਾਉਨ ਇੱਕੋ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ, ਤਾਂ ਇੱਕ ਨੂੰ ਦੂਜੇ ਤੋਂ ਬਿਨਾਂ ਹਿਲਾਉਣ ਦਾ ਮਤਲਬ ਪੂਰੇ API 'ਤੇ ਮੁੜ ਵਿਚਾਰ ਕਰਨਾ ਹੈ। ਪਰ ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਂ ਡੀਬੱਗ ਕਰਨ ਲਈ ਕੁਝ ਵੀ ਨਹੀਂ ਹੈ। ਸਮੱਸਿਆ ਸਿਰਫ਼ ਮੌਜੂਦ ਨਹੀਂ ਹੈ। ਕੀ ਆਧੁਨਿਕ CSS ਅਜੇ ਵੀ ਹੱਲ ਨਹੀਂ ਕਰਦਾ CSS ਇੱਥੇ ਇੱਕ ਲੰਮਾ ਸਫ਼ਰ ਆ ਗਿਆ ਹੈ, ਪਰ ਅਜੇ ਵੀ ਅਜਿਹੀਆਂ ਥਾਵਾਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਨਿਰਾਸ਼ ਕਰਨ ਦਿੰਦੀਆਂ ਹਨ। ਸਥਿਤੀ: ਸਥਿਰ ਅਤੇ ਪਰਿਵਰਤਨ ਮੁੱਦੇ ਅਜੇ ਵੀ ਉੱਥੇ ਹਨ। ਇਹ ਜਾਣਬੁੱਝ ਕੇ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕੋਈ CSS ਹੱਲ ਮੌਜੂਦ ਨਹੀਂ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਜੋ ਤੁਹਾਡੇ ਲੇਆਉਟ ਨੂੰ ਇੱਕ ਪਰਿਵਰਤਿਤ ਤੱਤ ਵਿੱਚ ਲਪੇਟਦੀ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਪੋਰਟਲ ਜਾਂ ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਦੀ ਲੋੜ ਹੈ। CSS ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਹੋਨਹਾਰ ਹੈ, ਪਰ ਨਵੀਂ। ਜਿਵੇਂ ਕਿ ਪਹਿਲਾਂ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਫਾਇਰਫਾਕਸ ਨੂੰ ਅਜੇ ਵੀ ਪੌਲੀਫਿਲ ਦੀ ਲੋੜ ਹੈ ਜਦੋਂ ਮੈਂ ਇਹ ਲਿਖ ਰਿਹਾ ਹਾਂ। ਮੈਂ ਇਸਦੇ ਨਾਲ ਲੇਆਉਟ ਕਿਨਾਰੇ ਦੇ ਕੇਸਾਂ ਨੂੰ ਮਾਰਿਆ ਹੈ ਜਿਸ ਵਿੱਚ ਫਾਲਬੈਕ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਿਸਦੀ ਮੈਂ ਉਮੀਦ ਨਹੀਂ ਕੀਤੀ ਸੀ. ਜੇਕਰ ਤੁਹਾਨੂੰ ਅੱਜ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਇਕਸਾਰ ਵਿਵਹਾਰ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਅਜੇ ਵੀ ਮੁਸ਼ਕਲ ਹਿੱਸਿਆਂ ਲਈ JavaScript ਤੱਕ ਪਹੁੰਚ ਰਹੇ ਹੋ। ਜੋ ਜੋੜ ਮੈਂ ਅਸਲ ਵਿੱਚ ਆਪਣੇ ਵਰਕਫਲੋ ਨੂੰ ਬਦਲਿਆ ਹੈ ਉਹ ਹੈ HTML ਪੋਪੋਵਰ API, ਜੋ ਹੁਣ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਉਪਲਬਧ ਹੈ। ਪੌਪਓਵਰ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਤੱਤ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਸਿਖਰਲੀ ਪਰਤ ਵਿੱਚ ਰੈਂਡਰ ਹੁੰਦੇ ਹਨ, ਹਰ ਚੀਜ਼ ਤੋਂ ਉੱਪਰ, ਬਿਨਾਂ JavaScript ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
Escape ਹੈਂਡਲਿੰਗ, ਡਿਸਮਿਸ-ਆਨ-ਕਲਿਕ-ਆਊਟ, ਅਤੇ ਠੋਸ ਪਹੁੰਚਯੋਗਤਾ ਅਰਥ ਵਿਗਿਆਨ ਟੂਲਟਿਪਸ, ਡਿਸਕਲੋਜ਼ਰ ਵਿਜੇਟਸ, ਅਤੇ ਸਧਾਰਨ ਓਵਰਲੇ ਵਰਗੀਆਂ ਚੀਜ਼ਾਂ ਲਈ ਮੁਫਤ ਆਉਂਦੇ ਹਨ। ਇਹ ਪਹਿਲਾ ਟੂਲ ਹੈ ਜੋ ਮੈਂ ਹੁਣ ਤੱਕ ਪਹੁੰਚਦਾ ਹਾਂ। ਉਸ ਨੇ ਕਿਹਾ, ਇਹ ਸਥਿਤੀ ਨੂੰ ਹੱਲ ਨਹੀਂ ਕਰਦਾ. ਇਹ ਲੇਅਰਿੰਗ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ. ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ ਇੱਕ ਪੌਪਓਵਰ ਨੂੰ ਇਸਦੇ ਟਰਿੱਗਰ ਨਾਲ ਅਲਾਈਨ ਕਰਨ ਲਈ ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਜਾਂ JavaScript ਦੀ ਲੋੜ ਹੈ। Popover API ਲੇਅਰਿੰਗ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਪਲੇਸਮੈਂਟ ਨੂੰ ਸੰਭਾਲਦੀ ਹੈ। ਇਕੱਠੇ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਉਹ ਜ਼ਿਆਦਾਤਰ ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਨੂੰ ਕਵਰ ਕਰਦੇ ਹਨ ਜੋ ਤੁਸੀਂ ਪਹਿਲਾਂ ਕਿਸੇ ਲਾਇਬ੍ਰੇਰੀ ਲਈ ਕਰਨ ਲਈ ਪਹੁੰਚਦੇ ਹੋ। ਤੁਹਾਡੀ ਸਥਿਤੀ ਲਈ ਇੱਕ ਫੈਸਲਾ ਗਾਈਡ ਇਸ ਸਭ ਨੂੰ ਔਖੇ ਤਰੀਕੇ ਨਾਲ ਲੰਘਣ ਤੋਂ ਬਾਅਦ, ਇਹ ਹੈ ਕਿ ਮੈਂ ਹੁਣ ਚੋਣ ਬਾਰੇ ਅਸਲ ਵਿੱਚ ਕਿਵੇਂ ਸੋਚਦਾ ਹਾਂ.
ਇੱਕ ਪੋਰਟਲ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਮੈਂ ਇਸਦੀ ਵਰਤੋਂ ਉਦੋਂ ਕਰਾਂਗਾ ਜਦੋਂ ਟਰਿੱਗਰ ਨੇਸਟਡ ਸਕ੍ਰੋਲ ਕੰਟੇਨਰਾਂ ਵਿੱਚ ਡੂੰਘਾ ਰਹਿੰਦਾ ਹੈ। ਮੈਂ ਟੇਬਲ ਐਕਸ਼ਨ ਮੀਨੂ ਲਈ ਇਸ ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਅਤੇ ਇਸਨੂੰ ਫੋਕਸ ਰੀਸਟੋਰੇਸ਼ਨ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਜਾਂਚਾਂ ਨਾਲ ਜੋੜਿਆ। ਇਹ ਸਭ ਤੋਂ ਭਰੋਸੇਮੰਦ ਵਿਕਲਪ ਹੈ, ਪਰ ਵਾਧੂ ਵਾਇਰਿੰਗ ਲਈ ਬਜਟ ਸਮਾਂ. ਸਥਿਰ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਉਦੋਂ ਲਈ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਵਨੀਲਾ JavaScript ਜਾਂ ਇੱਕ ਹਲਕੇ ਫਰੇਮਵਰਕ ਵਿੱਚ ਹੋ ਅਤੇ ਇਹ ਪੁਸ਼ਟੀ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਕੋਈ ਪੂਰਵਜ ਰੂਪਾਂਤਰ ਜਾਂ ਫਿਲਟਰ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਹ ਸੈਟ ਅਪ ਕਰਨਾ ਸਰਲ ਹੈ ਅਤੇ ਡੀਬੱਗ ਕਰਨਾ ਸਰਲ ਹੈ, ਜਿੰਨਾ ਚਿਰ ਇਹ ਇੱਕ ਰੁਕਾਵਟ ਹੈ। CSS ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਜਦੋਂ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ ਇਸਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਤਾਂ ਇਸ ਲਈ ਪਹੁੰਚੋ। ਜੇਕਰ ਫਾਇਰਫਾਕਸ ਸਹਾਇਤਾ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਇਸਨੂੰ @oddbird ਪੌਲੀਫਿਲ ਨਾਲ ਜੋੜੋ। ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਪਲੇਟਫਾਰਮ ਆਖਰਕਾਰ ਜਾ ਰਿਹਾ ਹੈ ਅਤੇ ਆਖਰਕਾਰ ਤੁਹਾਡੀ ਜਾਣ-ਪਛਾਣ ਵਾਲੀ ਪਹੁੰਚ ਬਣ ਜਾਵੇਗਾ। DOM ਦਾ ਪੁਨਰਗਠਨ ਕਰੋ। ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ ਜਦੋਂ ਆਰਕੀਟੈਕਚਰ ਇਸਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਜ਼ੀਰੋ ਰਨਟਾਈਮ ਜਟਿਲਤਾ ਚਾਹੁੰਦੇ ਹੋ। ਮੇਰਾ ਮੰਨਣਾ ਹੈ ਕਿ ਇਹ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ ਸਭ ਤੋਂ ਘੱਟ ਦਰਜਾਬੰਦੀ ਵਾਲਾ ਵਿਕਲਪ ਹੈ। ਪੈਟਰਨਾਂ ਨੂੰ ਜੋੜੋ। ਇਹ ਉਦੋਂ ਕਰੋ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੀ ਪ੍ਰਾਇਮਰੀ ਪਹੁੰਚ ਦੇ ਤੌਰ 'ਤੇ ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਚਾਹੁੰਦੇ ਹੋ, ਅਸਮਰਥਿਤ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ JavaScript ਫਾਲਬੈਕ ਨਾਲ ਪੇਅਰ ਕੀਤਾ ਹੋਇਆ ਹੈ। ਜਾਂ ਕੋਆਰਡੀਨੇਟ ਸ਼ੁੱਧਤਾ ਲਈ getBoundingClientRect() ਨਾਲ ਜੋੜੀ DOM ਪਲੇਸਮੈਂਟ ਲਈ ਇੱਕ ਪੋਰਟਲ।
ਸਿੱਟਾ ਮੈਂ ਇਸ ਬੱਗ ਨੂੰ ਇੱਕ ਵਾਰ ਦੇ ਮੁੱਦੇ ਵਜੋਂ ਵਰਤਦਾ ਸੀ — ਪੈਚ ਕਰਨ ਅਤੇ ਅੱਗੇ ਵਧਣ ਲਈ ਕੁਝ. ਪਰ ਇੱਕ ਵਾਰ ਜਦੋਂ ਮੈਂ ਇਸ ਵਿੱਚ ਸ਼ਾਮਲ ਤਿੰਨਾਂ ਪ੍ਰਣਾਲੀਆਂ ਨੂੰ ਸਮਝਣ ਲਈ ਕਾਫ਼ੀ ਦੇਰ ਤੱਕ ਬੈਠ ਗਿਆ - ਓਵਰਫਲੋ ਕਲਿਪਿੰਗ, ਸਟੈਕਿੰਗ ਪ੍ਰਸੰਗ, ਅਤੇ ਬਲਾਕ ਰੱਖਣ ਵਾਲੇ - ਇਹ ਬੇਤਰਤੀਬ ਮਹਿਸੂਸ ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੱਤਾ। ਮੈਂ ਇੱਕ ਟੁੱਟੇ ਡਰਾਪਡਾਉਨ ਨੂੰ ਦੇਖ ਸਕਦਾ ਹਾਂ ਅਤੇ ਤੁਰੰਤ ਪਤਾ ਲਗਾ ਸਕਦਾ ਹਾਂ ਕਿ ਕਿਹੜਾ ਪੂਰਵਜ ਜ਼ਿੰਮੇਵਾਰ ਸੀ। ਮੈਂ DOM ਨੂੰ ਕਿਵੇਂ ਪੜ੍ਹਦਾ ਹਾਂ ਇਸ ਵਿੱਚ ਉਹ ਤਬਦੀਲੀ ਅਸਲ ਟੇਕਵੇ ਸੀ। ਕੋਈ ਇਕੱਲਾ ਸਹੀ ਜਵਾਬ ਨਹੀਂ ਹੈ। ਮੈਂ ਜਿਸ ਚੀਜ਼ ਲਈ ਪਹੁੰਚਿਆ ਉਹ ਇਸ ਗੱਲ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਮੈਂ ਕੋਡਬੇਸ ਵਿੱਚ ਕੀ ਨਿਯੰਤਰਿਤ ਕਰ ਸਕਦਾ ਹਾਂ: ਪੋਰਟਲ ਜਦੋਂ ਪੂਰਵਜ ਦਰਖਤ ਅਪ੍ਰਤੱਖ ਸੀ; ਸਥਿਰ ਸਥਿਤੀ ਜਦੋਂ ਇਹ ਸਾਫ਼ ਅਤੇ ਸਧਾਰਨ ਸੀ; ਤੱਤ ਨੂੰ ਹਿਲਾਉਣਾ ਜਦੋਂ ਕੁਝ ਵੀ ਮੈਨੂੰ ਨਹੀਂ ਰੋਕ ਰਿਹਾ ਸੀ; ਅਤੇ ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਹੁਣ,ਜਿੱਥੇ ਮੈਂ ਕਰ ਸਕਦਾ ਹਾਂ। ਤੁਸੀਂ ਜੋ ਵੀ ਚੁਣਦੇ ਹੋ, ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਆਖਰੀ ਕਦਮ ਨਾ ਮੰਨੋ। ਮੇਰੇ ਅਨੁਭਵ ਵਿੱਚ, ਇਹ ਬਿਲਕੁਲ ਉਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇਹ ਛੱਡਿਆ ਜਾਂਦਾ ਹੈ. ARIA ਸਬੰਧ, ਫੋਕਸ ਪ੍ਰਬੰਧਨ, ਕੀਬੋਰਡ ਵਿਵਹਾਰ — ਇਹ ਪਾਲਿਸ਼ ਨਹੀਂ ਹਨ। ਉਹ ਉਸ ਚੀਜ਼ ਦਾ ਹਿੱਸਾ ਹਨ ਜੋ ਚੀਜ਼ ਨੂੰ ਅਸਲ ਵਿੱਚ ਕੰਮ ਕਰਦੀ ਹੈ। ਮੇਰੇ GitHub ਰੈਪੋ ਵਿੱਚ ਪੂਰਾ ਸਰੋਤ ਕੋਡ ਦੇਖੋ. ਹੋਰ ਪੜ੍ਹਨਾ ਇਹ ਉਹ ਹਵਾਲੇ ਹਨ ਜੋ ਮੈਂ ਇਸ ਦੁਆਰਾ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਵਾਪਸ ਆਉਂਦੇ ਰਹੇ:
ਸਟੈਕਿੰਗ ਸੰਦਰਭ (MDN) "CSS ਐਂਕਰ ਪੋਜੀਸ਼ਨਿੰਗ ਗਾਈਡ", ਜੁਆਨ ਡਿਏਗੋ ਰੋਡਰਿਗਜ਼ "ਪੌਪਓਵਰ API ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨਾ", ਗੌਡਸਟਾਈਮ ਅਬੂਰੂ ਫਲੋਟਿੰਗ UI (floating-ui.com) CSS ਓਵਰਫਲੋ (MDN)
