ଦୃଶ୍ୟଟି ପ୍ରାୟ ସବୁବେଳେ ସମାନ, ଯାହା ଏକ ସ୍କ୍ରୋଲେବଲ୍ ପାତ୍ର ମଧ୍ୟରେ ଏକ ଡାଟା ଟେବୁଲ୍ | ପ୍ରତ୍ୟେକ ଧାଡିରେ ଏକ ଆକ୍ସନ୍ ମେନୁ ଅଛି, କିଛି ଅପ୍ସନ୍ ସହିତ ଏକ ଛୋଟ ଡ୍ରପଡାଉନ୍, ଯେପରିକି ଏଡିଟ୍, ଡୁପ୍ଲିକେଟ୍, ଏବଂ ଡିଲିଟ୍ | ତୁମେ ଏହାକୁ ନିର୍ମାଣ କର, ଏହା ପୃଥକ ଭାବରେ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ କାମ କରୁଥିବା ପରି ମନେହୁଏ, ଏବଂ ତା’ପରେ କେହି ଏହାକୁ ସ୍କ୍ରୋଲ୍ ଯୋଗ୍ୟ ଡିଭ ଭିତରେ ରଖନ୍ତି ଏବଂ ଜିନିଷଗୁଡ଼ିକ ଅଲଗା ହୋଇଯାଏ | ମୁଁ ଏହି ଭିନ୍ନ ତ୍ରୁଟିକୁ ତିନୋଟି ଭିନ୍ନ କୋଡବେସରେ ଦେଖିଛି: ପାତ୍ର, ଷ୍ଟାକ, ଏବଂ framework ାଞ୍ଚା, ସମସ୍ତ ଭିନ୍ନ | ବଗ୍, ଯଦିଓ, ସଂପୂର୍ଣ୍ଣ ସମାନ | ଡ୍ରପଡାଉନ୍ ପାତ୍ରର ଧାରରେ କ୍ଲିପ୍ ହୋଇଯାଏ | କିମ୍ବା ଏହା ବିଷୟବସ୍ତୁ ପଛରେ ଦେଖାଏ ଯାହା ଯୁକ୍ତିଯୁକ୍ତ ଭାବରେ ଏହା ତଳେ ରହିବା ଉଚିତ | କିମ୍ବା ଉପଭୋକ୍ତା ସ୍କ୍ରୋଲ୍ ନହେବା ପର୍ଯ୍ୟନ୍ତ ଏହା ଭଲ କାମ କରେ, ଏବଂ ତାପରେ ଏହା ଖସିଯାଏ | ଆପଣ z-index: 9999 ପାଇଁ ପହ reach ୍ଚନ୍ତି | ବେଳେବେଳେ ଏହା ସାହାଯ୍ୟ କରେ, କିନ୍ତୁ ଅନ୍ୟ ସମୟରେ ଏହା ସଂପୂର୍ଣ୍ଣ କିଛି କରେ ନାହିଁ | ସେହି ଅସଙ୍ଗତି ହେଉଛି ପ୍ରଥମ ସୂତ୍ର ଯାହା କିଛି ଗଭୀର ଭାବରେ ଘଟୁଛି | ଏହା ଫେରି ଆସିବାର କାରଣ ହେଉଛି ତିନୋଟି ପୃଥକ ବ୍ରାଉଜର୍ ସିଷ୍ଟମ୍ ଜଡିତ, ଏବଂ ଅଧିକାଂଶ ଡେଭଲପର୍ ପ୍ରତ୍ୟେକଙ୍କୁ ନିଜେ ବୁ understand ନ୍ତି କିନ୍ତୁ ଯେତେବେଳେ ତିନୋଟି ଧକ୍କା ହୁଏ ସେତେବେଳେ କ’ଣ ହୁଏ ସେ ବିଷୟରେ କେବେ ଚିନ୍ତା କରନ୍ତୁ ନାହିଁ: ଓଭରଫ୍ଲୋ, ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ଏବଂ ବ୍ଲକ୍ ଧାରଣ କରିବା |
ଥରେ ତୁମେ ବୁ understand ିଗଲେ କିପରି ତିନୋଟି ପାରସ୍ପରିକ କାର୍ଯ୍ୟ କରେ, ବିଫଳତା ମୋଡ୍ ଅନିୟମିତତା ଅନୁଭବ ବନ୍ଦ କରେ | ବାସ୍ତବରେ, ସେମାନେ ପୂର୍ବାନୁମାନ କରନ୍ତି | ତିନୋଟି ଜିନିଷ ପ୍ରକୃତରେ ଏହାର କାରଣ | ଚାଲନ୍ତୁ ସେହି ଆଇଟମଗୁଡିକର ପ୍ରତ୍ୟେକକୁ ବିସ୍ତୃତ ଭାବରେ ଦେଖିବା | ଓଭରଫ୍ଲୋ ସମସ୍ୟା | ଯେତେବେଳେ ଆପଣ ଓଭରଫ୍ଲୋ ସେଟ୍ କରନ୍ତି: ଲୁକ୍କାୟିତ, ଓଭରଫ୍ଲୋ: ସ୍କ୍ରୋଲ୍, କିମ୍ବା ଓଭରଫ୍ଲୋ: ଏକ ଉପାଦାନରେ ଅଟୋ, ବ୍ରାଉଜର୍ ଯେକ anything ଣସି ଜିନିଷକୁ କ୍ଲିପ୍ କରିବ ଯାହାକି ଏହାର ସୀମା ବାହାରେ ବିସ୍ତାରିତ ବଂଶଧରଙ୍କୁ ଅନ୍ତର୍ଭୁକ୍ତ କରେ | .scroll-ପାତ୍ର { ଓଭରଫ୍ଲୋ: ଅଟୋ; ଉଚ୍ଚତା: 300px; / * ଏହା ଡ୍ରପ୍ ଡାଉନ୍ କ୍ଲିପ୍ କରିବ, ଫୁଲ୍ ଷ୍ଟପ୍ * / }
.dropdown { ଅବସ୍ଥାନ: ସଂପୂର୍ଣ୍ଣ; / * କ matter ଣସି ଫରକ ପଡ଼ିବ ନାହିଁ - ତଥାପି .scroll-ପାତ୍ର * ଦ୍ୱାରା କ୍ଲିପ୍ ହୋଇଛି | }
ପ୍ରଥମ ଥର ମୁଁ ଏହା ଭିତରକୁ ଦ ran ଡିବା ମୋତେ ଆଶ୍ଚର୍ଯ୍ୟ କଲା | ମୁଁ ଅନୁମାନ କରିଛି ସ୍ଥିତି: ସଂପୂର୍ଣ୍ଣ ଏକ ଉପାଦାନକୁ ଏକ ପାତ୍ରର କ୍ଲିପିଂରୁ ରକ୍ଷା କରିବାକୁ ଦେବ | ଏହା ନୁହେଁ | ଅଭ୍ୟାସରେ, ଏହାର ଅର୍ଥ ହେଉଛି ଯେକ any ଣସି ପୂର୍ବଜଙ୍କ ଦ୍ an ାରା ଏକ ସଂପୂର୍ଣ୍ଣ ସ୍ଥିତ ମେନୁ କଟାଯାଇପାରିବ ଯାହାର ଏକ ଦୃଶ୍ୟମାନ ନଥିବା ଓଭରଫ୍ଲୋ ମୂଲ୍ୟ ଅଛି, ଯଦିଓ ସେହି ପିତୃପୁରୁଷ ମେନୁର ବ୍ଲକ୍ ଧାରଣ କରିନାହାଁନ୍ତି | କ୍ଲିପିଂ ଏବଂ ପୋଜିସନ୍ ହେଉଛି ଅଲଗା ସିଷ୍ଟମ୍ | ସେଗୁଡ଼ିକ କେବଳ ଧକ୍କା ହେବା ପରି ଘଟେ ଯାହାକି ତୁମେ ଉଭୟ ବୁ understand ିବା ପର୍ଯ୍ୟନ୍ତ ସଂପୂର୍ଣ୍ଣ ଅନିୟମିତ ଦେଖାଯାଏ |
CreatePortal ବ୍ୟବହାର କରି ଏଠାରେ ଏକ ପ୍ରତିକ୍ରିୟା ଉଦାହରଣ ଅଛି:
'react-dom' ରୁ {createPortal import ଆମଦାନି କରନ୍ତୁ; 'ପ୍ରତିକ୍ରିୟା' ରୁ {useState, useEffect, useRef import ଆମଦାନି କରନ୍ତୁ;
ଫଙ୍କସନ୍ ଡ୍ରପଡାଉନ୍ ({ଆଙ୍କର୍ ରେଫ୍, isOpen, ପିଲାମାନେ}) { const [position, setPosition] = useState ({ଶୀର୍ଷ: 0, ବାମ: 0});
useEffect (() => { ଯଦି (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect (); setPosition ({ ଶୀର୍ଷ: rect.bottom + window.scrollY, ବାମ: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ଯଦି (! isOpen) ଫେରସ୍ତ ନଲ୍;
ଫେରସ୍ତ ପୋର୍ଟାଲ୍ (
ଏବଂ, ଅବଶ୍ୟ, ଆମେ ଉପଲବ୍ଧତାକୁ ଅଣଦେଖା କରିପାରିବୁ ନାହିଁ | ବିଷୟବସ୍ତୁ ଉପରେ ଦେଖାଯାଉଥିବା ସ୍ଥିର ଉପାଦାନଗୁଡ଼ିକ ତଥାପି କୀବୋର୍ଡ୍-ପହଞ୍ଚିବା ଆବଶ୍ୟକ | ଯଦି ଫୋକସ୍ କ୍ରମ ସ୍ natural ାଭାବିକ ଭାବରେ ସ୍ଥିର ଡ୍ରପଡାଉନ୍ କୁ ଯାଏ ନାହିଁ, ତେବେ ଆପଣଙ୍କୁ କୋଡ୍ ବ୍ୟବହାର କରି ଏହାକୁ ପରିଚାଳନା କରିବାକୁ ପଡିବ | ଏହା ମଧ୍ୟ ଯାଞ୍ଚ କରିବା ଯୋଗ୍ୟ ଯେ ଏହା ଅନ୍ୟ ଇଣ୍ଟରାକ୍ଟିଭ୍ ବିଷୟବସ୍ତୁ ଉପରେ ବସିବ ନାହିଁ, ଏହାକୁ ବରଖାସ୍ତ କରିବାର କ way ଣସି ଉପାୟ ନାହିଁ | କୀବୋର୍ଡ୍ ପରୀକ୍ଷଣରେ ତାହା ଆପଣଙ୍କୁ କାମୁଡ଼େ | CSS ଆଙ୍କର୍ ପୋଜିସନ୍: ଯେଉଁଠାରେ ମୁଁ ଭାବୁଛି ଏହା ହେଡିଙ୍ଗ୍ | CSS ଆଙ୍କର୍ ପୋଜିସନ୍ ହେଉଛି ସେହି ଦିଗ ଯାହା ମୁଁ ବର୍ତ୍ତମାନ ଅଧିକ ଆଗ୍ରହୀ | ମୁଁ ନିଶ୍ଚିତ ନଥିଲି ଯେ ଯେତେବେଳେ ମୁଁ ଏହାକୁ ପ୍ରଥମେ ଦେଖିଲି ସେତେବେଳେ କେତେ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ୟବହାର ଯୋଗ୍ୟ | ଏହା ଆପଣଙ୍କୁ ଏକ ଡ୍ରପଡାଉନ୍ ଏବଂ ଏହାର ଟ୍ରିଗର ମଧ୍ୟରେ ସିଧାସଳଖ CSS ରେ ସମ୍ପର୍କ ଘୋଷଣା କରିବାକୁ ଦିଏ, ଏବଂ ବ୍ରାଉଜର୍ ସଂଯୋଜନାଗୁଡିକ ପରିଚାଳନା କରେ | .trigger { ଆଙ୍କର୍-ନାମ: --my-trigger; }
.dropdown-menu { ଅବସ୍ଥାନ: ସଂପୂର୍ଣ୍ଣ; ଅବସ୍ଥାନ-ଆଙ୍କର୍: - ମୋର-ଟ୍ରିଗର; ଉପର: ଲଙ୍ଗର (ତଳ); ବାମ: ଲଙ୍ଗର (ବାମ); ପୋଜିସନ୍-ଟ୍ରା-ଫଲବ୍ୟାକ୍: ଫ୍ଲିପ୍-ବ୍ଲକ୍, ଫ୍ଲିପ୍-ଇନଲାଇନ; }
ପୋଜିସନ୍-ଟ୍ରା-ଫଲବ୍ୟାକ୍ ପ୍ରପର୍ଟି ହେଉଛି ଏକ ମାନୁଆଲ୍ ଗଣନା ଉପରେ ବ୍ୟବହାର କରି ଏହି ମୂଲ୍ୟବୋଧ କରେ | ଛାଡିବା ପୂର୍ବରୁ ବ୍ରାଉଜର୍ ବିକଳ୍ପ ପ୍ଲେସମେଣ୍ଟଗୁଡିକ ଚେଷ୍ଟା କରେ, ତେଣୁ ଭ୍ୟୁପୋର୍ଟର ତଳେ ଥିବା ଏକ ଡ୍ରପଡାଉନ୍ କାଟିବା ପରିବର୍ତ୍ତେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଉପରକୁ ଉଡିଯାଏ | କ୍ରୋମିୟମ-ଆଧାରିତ ବ୍ରାଉଜରରେ ବ୍ରାଉଜର୍ ସମର୍ଥନ ଦୃ solid ଏବଂ ସଫାରିରେ ବ growing ୁଛି | ଫାୟାରଫକ୍ସ ଏକ ପଲିଫିଲ୍ ଆବଶ୍ୟକ କରେ | @ ଓଡବର୍ଡ / css- ଆଙ୍କର୍-ପୋଜିସନ୍ ପ୍ୟାକେଜ୍ କୋର୍ ସ୍ପେକ୍ କୁ ଆବୃତ କରେ | ମୁଁ ଏହା ସହିତ ଲେଆଉଟ୍ ଏଜ୍ କେସ୍ ହିଟ୍ କରିଛି ଯାହା ଫଲବ୍ୟାକ୍ ଆବଶ୍ୟକ କରେ ଯାହା ମୁଁ ଆଶା କରି ନ ଥିଲି, ତେଣୁ ଏହାକୁ ଏକ ପ୍ରଗତିଶୀଳ ଉନ୍ନତି ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ କିମ୍ବା ଏହାକୁ ଏକ ସହିତ ଯୋଡନ୍ତୁ |ଫାୟାରଫକ୍ସ ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ ଫଲବ୍ୟାକ୍ | ସଂକ୍ଷେପରେ, ପ୍ରତିଜ୍ଞାକାରୀ କିନ୍ତୁ ଏପର୍ଯ୍ୟନ୍ତ ସର୍ବଭାରତୀୟ ନୁହେଁ | ତୁମର ଲକ୍ଷ୍ୟ ବ୍ରାଉଜରରେ ପରୀକ୍ଷା କର | ଏବଂ ଯେତିକି ସୁଗମ୍ୟତା ଅଛି, CSS ରେ ଏକ ଭିଜୁଆଲ୍ ସମ୍ପର୍କ ଘୋଷଣା କରିବା ଆକ୍ସେସିବିଲିଟି ଗଛକୁ କିଛି କହିବ ନାହିଁ | ଆରିଆ-କଣ୍ଟ୍ରୋଲ୍ସ, ଆରିଆ-ବିସ୍ତାରିତ, ଆରିଆ-ହ୍ୟାସପପ୍ - ସେହି ଅଂଶଟି ତୁମ ଉପରେ ଅଛି | ବେଳେବେଳେ ଫିକ୍ସ କେବଳ ଉପାଦାନକୁ ଘୁଞ୍ଚାଏ | ଏକ ପୋର୍ଟାଲ୍ ପହଞ୍ଚିବା ପୂର୍ବରୁ କିମ୍ବା ସମନ୍ୱୟ ଗଣନା କରିବା ପୂର୍ବରୁ, ମୁଁ ସର୍ବଦା ପ୍ରଥମେ ଗୋଟିଏ ପ୍ରଶ୍ନ ପଚାରିଥାଏ: ଏହି ଡ୍ରପଡାଉନ୍ ପ୍ରକୃତରେ ସ୍କ୍ରୋଲ୍ ପାତ୍ରରେ ରହିବା ଆବଶ୍ୟକ କି? ଯଦି ଏହା ନହୁଏ, ମାର୍କଅପ୍ କୁ ଏକ ଉଚ୍ଚ ସ୍ତରୀୟ ରାପରକୁ ସ୍ଥାନାନ୍ତର କରିବା, କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ଏବଂ କ coordin ଣସି ସମନ୍ୱୟ ଗଣନା ବିନା ସମସ୍ୟାକୁ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ଦୂର କରିଥାଏ | ଏହା ସର୍ବଦା ସମ୍ଭବ ନୁହେଁ | ଯଦି ବଟନ୍ ଏବଂ ଡ୍ରପଡାଉନ୍ ସମାନ ଉପାଦାନରେ ଆବଦ୍ଧ, ଅନ୍ୟଟି ବିନା ଗୋଟିଏକୁ ଘୁଞ୍ଚାଇବା ଅର୍ଥ ହେଉଛି ସମଗ୍ର API ବିଷୟରେ ପୁନର୍ବିଚାର କରିବା | କିନ୍ତୁ ଯେତେବେଳେ ଆପଣ ଏହା କରିପାରିବେ, ତ୍ରୁଟି ନିବାରଣ କରିବାର କିଛି ନାହିଁ | ସମସ୍ୟାଟି ବିଦ୍ୟମାନ ନାହିଁ | କ’ଣ ଆଧୁନିକ CSS ଏପର୍ଯ୍ୟନ୍ତ ସମାଧାନ କରେ ନାହିଁ | CSS ଏଠାରେ ଏକ ଦୀର୍ଘ ରାସ୍ତା ଅତିକ୍ରମ କରିଛି, ତଥାପି ସେଠାରେ କିଛି ସ୍ଥାନ ଅଛି ଯାହା ଆପଣଙ୍କୁ ହତାଶ କରେ | ସ୍ଥିତି: ସ୍ଥିର ଏବଂ ପରିବର୍ତ୍ତନ ପ୍ରସଙ୍ଗଗୁଡ଼ିକ ସେଠାରେ ଅଛି | ଏହା ଉଦ୍ଦେଶ୍ୟମୂଳକ ଭାବରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଅଟେ, ଯାହାର ଅର୍ଥ କ CS ଣସି CSS ୱାର୍କଆଉଟ୍ ନାହିଁ | ଯଦି ଆପଣ ଏକ ଆନିମେସନ୍ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରୁଛନ୍ତି ଯାହା ଆପଣଙ୍କର ଲେଆଉଟ୍ କୁ ଏକ ପରିବର୍ତ୍ତିତ ଉପାଦାନରେ ଗୁଡ଼ାଏ, ଆପଣ ପୋର୍ଟାଲ୍ କିମ୍ବା ଆଙ୍କର୍ ପୋଜିସନ୍ ଆବଶ୍ୟକ କରନ୍ତି | CSS ଆଙ୍କର୍ ପୋଜିସନ୍ ପ୍ରତିଜ୍ଞାକାରୀ, କିନ୍ତୁ ନୂତନ | ପୂର୍ବରୁ କୁହାଯାଇଥିବା ପରି, ମୁଁ ଏହା ଲେଖିବା ସମୟରେ ଫାୟାରଫକ୍ସ ଏକ ପଲିଫିଲ୍ ଆବଶ୍ୟକ କରେ | ମୁଁ ଏହା ସହିତ ଲେଆଉଟ୍ ଏଜ୍ କେସ୍ ହିଟ୍ କରିଥିଲି ଯାହା ଫଲବ୍ୟାକ୍ ଆବଶ୍ୟକ କରେ ଯାହା ମୁଁ ଆଶା କରି ନ ଥିଲି | ଯଦି ଆପଣ ଆଜି ସମସ୍ତ ବ୍ରାଉଜର୍ ମଧ୍ୟରେ ସ୍ଥିର ଆଚରଣ ଆବଶ୍ୟକ କରନ୍ତି, ତେବେ ଆପଣ ତଥାପି ଚତୁର ଅଂଶ ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ ପାଇଁ ପହଞ୍ଚୁଛନ୍ତି | ଯୋଗ ମୁଁ ପ୍ରକୃତରେ ମୋର କାର୍ଯ୍ୟଧାରାକୁ ପରିବର୍ତ୍ତନ କରିଛି HTML ପପୋଭର API, ବର୍ତ୍ତମାନ ସମସ୍ତ ଆଧୁନିକ ବ୍ରାଉଜରରେ ଉପଲବ୍ଧ | କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ପୋଜିସନ୍ ଆବଶ୍ୟକ ନକରି, ବ୍ରାଉଜର୍ ର ଉପର ସ୍ତରରେ ପପ୍ ଓଭର ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ ଉପାଦାନଗୁଡ଼ିକ |
<ବଟନ୍ popovertarget = "dropdown-demo"> ଖୋଲନ୍ତୁ |
ଟୁଲ୍ ଟିପ୍ସ, ପ୍ରକାଶ ୱିଜେଟ୍, ଏବଂ ସରଳ ଓଭରଲେଜ୍ ଭଳି ଜିନିଷ ପାଇଁ ପଳାୟନ ହ୍ୟାଣ୍ଡଲିଂ, ବର୍ଜନ-କ୍ଲିକ୍-ବାହାରେ, ଏବଂ କଠିନ ଆକ୍ସେସିବିଲିଟି ସେମାଣ୍ଟିକ୍ସ ମାଗଣା ଆସେ | ଏହା ହେଉଛି ପ୍ରଥମ ଉପକରଣ ଯାହା ମୁଁ ବର୍ତ୍ତମାନ ପାଇଁ ପହଞ୍ଚିଛି | ଏହା କହିଲା, ଏହା ପୋଜିସନ୍ ସମାଧାନ କରିବ ନାହିଁ | ଏହା ସ୍ତରର ସମାଧାନ କରେ | ଏହାର ଟ୍ରିଗରରେ ଏକ ପପ୍ ଓଭରକୁ ଆଲାଇନ୍ କରିବା ପାଇଁ ଆପଣଙ୍କୁ ଏପର୍ଯ୍ୟନ୍ତ ଆଙ୍କର୍ ପୋଜିସନ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ | ପପୋଭର API ଲେରିଂ ପରିଚାଳନା କରେ | ଆଙ୍କର୍ ପୋଜିସନ୍ ପ୍ଲେସମେଣ୍ଟ୍ ନିୟନ୍ତ୍ରଣ କରେ | ଏକତ୍ର ବ୍ୟବହୃତ, ସେମାନେ ଏକ ଲାଇବ୍ରେରୀ କରିବା ପାଇଁ ଆପଣ ପୂର୍ବରୁ ଯାହା ପହଞ୍ଚିଛନ୍ତି ତାହା ମଧ୍ୟରୁ ଅଧିକାଂଶ ସେଗୁଡିକ ଆବୃତ କରେ | ତୁମର ପରିସ୍ଥିତି ପାଇଁ ଏକ ନିଷ୍ପତ୍ତି ଗାଇଡ୍ | ଏହି ସବୁ କଠିନ ଉପାୟ ଅତିକ୍ରମ କରିବା ପରେ, ଏଠାରେ ମୁଁ ବର୍ତ୍ତମାନ ପସନ୍ଦ ବିଷୟରେ କିପରି ଭାବୁଛି |
ଏକ ପୋର୍ଟାଲ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଯେତେବେଳେ ଟ୍ରିଗର୍ ନେଷ୍ଟେଡ୍ ସ୍କ୍ରୋଲ୍ ପାତ୍ରରେ ଗଭୀର ଭାବରେ ବାସ କରେ ମୁଁ ଏହାକୁ ବ୍ୟବହାର କରେ | ଟେବୁଲ୍ ଆକ୍ସନ୍ ମେନୁଗୁଡ଼ିକ ପାଇଁ ମୁଁ ଏହି ପ୍ୟାଟର୍ ବ୍ୟବହାର କଲି ଏବଂ ଏହାକୁ ଫୋକସ୍ ପୁନରୁଦ୍ଧାର ଏବଂ ଆକ୍ସେସିବିଲିଟି ଚେକ୍ ସହିତ ଯୋଡିଲି | ଏହା ସବୁଠାରୁ ନିର୍ଭରଯୋଗ୍ୟ ବିକଳ୍ପ, କିନ୍ତୁ ଅତିରିକ୍ତ ତାର ପାଇଁ ବଜେଟ୍ ସମୟ | ସ୍ଥିର ପୋଜିସନ୍ ବ୍ୟବହାର କରନ୍ତୁ ଏହା ଯେତେବେଳେ ଆପଣ ଭାନିଲା ଜାଭାସ୍କ୍ରିପ୍ଟ କିମ୍ବା ହାଲୁକା framework ାଞ୍ଚାରେ ଥାଆନ୍ତି ଏବଂ କ no ଣସି ପୂର୍ବଜ ଟ୍ରାନ୍ସଫର୍ମ କିମ୍ବା ଫିଲ୍ଟର ପ୍ରୟୋଗ କରନ୍ତି ତାହା ଯାଞ୍ଚ କରିପାରିବେ | ସେଟଅପ୍ କରିବା ସରଳ ଏବଂ ଡିବଗ୍ କରିବା ସରଳ, ଯେପର୍ଯ୍ୟନ୍ତ ସେହି ଗୋଟିଏ ପ୍ରତିବନ୍ଧକ ରହିଥାଏ | CSS ଆଙ୍କର୍ ପୋଜିସନ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଯେତେବେଳେ ଆପଣଙ୍କର ବ୍ରାଉଜର୍ ସମର୍ଥନ ଏହାକୁ ଅନୁମତି ଦିଏ | ଯଦି ଫାୟାରଫକ୍ସ ସମର୍ଥନ ଆବଶ୍ୟକ ହୁଏ, ଏହାକୁ @oddbird polyfill ସହିତ ଯୋଡନ୍ତୁ | ଏହା ହେଉଛି ଯେଉଁଠାରେ ପ୍ଲାଟଫର୍ମ ଶେଷରେ ମୁଣ୍ଡ ଟେକିଛି ଏବଂ ଶେଷରେ ତୁମର ଯିବା ଆସିବା ହେବ | DOM କୁ ପୁନ ucture ନିର୍ମାଣ କରନ୍ତୁ ଯେତେବେଳେ ସ୍ଥାପତ୍ୟ ଏହାକୁ ଅନୁମତି ଦିଏ ଏହାକୁ ବ୍ୟବହାର କରନ୍ତୁ, ଏବଂ ଆପଣ ଶୂନ୍ୟ ଚାଲିବା ସମୟ ଜଟିଳତା ଚାହୁଁଛନ୍ତି | ମୁଁ ବିଶ୍ୱାସ କରେ ଏହା ସମ୍ଭବତ the ସବୁଠାରୁ ଅଣ୍ଡରଟେଡ୍ ବିକଳ୍ପ | ନମୁନାକୁ ଏକତ୍ର କର କିମ୍ବା DOM ପ୍ଲେସମେଣ୍ଟ ପାଇଁ ଏକ ପୋର୍ଟାଲ୍, ସମନ୍ୱୟ ସଠିକତା ପାଇଁ getBoundingClientRect () ସହିତ ଯୋଡି ହୋଇଛି |
ସିଦ୍ଧାନ୍ତ ମୁଁ ଏହି ବଗ୍ କୁ ଏକ-ଅଫ୍ ଇସ୍ୟୁ ଭାବରେ ବ୍ୟବହାର କରୁଥିଲି - କିଛି ପ୍ୟାଚ୍ ଏବଂ ଆଗକୁ ବ to ିବାକୁ | କିନ୍ତୁ ଥରେ ମୁଁ ଏହା ସହିତ ଜଡିତ ସମସ୍ତ ତିନୋଟି ସିଷ୍ଟମ୍ ବୁ understand ିବା ପାଇଁ ଯଥେଷ୍ଟ ସମୟ ବସିଥିଲି - ଓଭରଫ୍ଲୋ କ୍ଲିପିଂ, ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ ଏବଂ ବ୍ଲକ୍ ଧାରଣ କରିବା - ଏହା ଅନିୟମିତତା ଅନୁଭବ କରିବା ବନ୍ଦ କରିଦେଲା | ମୁଁ ଏକ ଭଙ୍ଗା ଡ୍ରପଡାଉନ୍ କୁ ଦେଖିପାରିଲି ଏବଂ କେଉଁ ପିତୃପୁରୁଷ ଦାୟୀ ତାହା ତୁରନ୍ତ ଖୋଜି ପାରିଲି | ମୁଁ କିପରି DOM ପ read ଼ିଥିଲି ସେହି ପରିବର୍ତ୍ତନ ହେଉଛି ପ୍ରକୃତ ନିଆଯିବା | କ single ଣସି ଗୋଟିଏ ସଠିକ୍ ଉତ୍ତର ନାହିଁ | ମୁଁ ଯାହା ପାଇଁ ପହଞ୍ଚିଥିଲି ତାହା ଉପରେ ନିର୍ଭର କରେ ଯାହା ମୁଁ କୋଡବେସରେ ନିୟନ୍ତ୍ରଣ କରିପାରିବି: ପୋର୍ଟାଲ୍ ଯେତେବେଳେ ପିତୃପୁରୁଷ ବୃକ୍ଷ ଅପ୍ରତ୍ୟାଶିତ ଥିଲା; ଯେତେବେଳେ ଏହା ସଫା ଏବଂ ସରଳ ଥିଲା ସ୍ଥିର ସ୍ଥିତି; ଯେତେବେଳେ କିଛି ମୋତେ ଅଟକାଉ ନଥିଲା ଉପାଦାନକୁ ଘୁଞ୍ଚାଇବା; ଏବଂ ଆଙ୍କର୍ ପୋଜିସନ୍ ବର୍ତ୍ତମାନ,ଯେଉଁଠାରେ ମୁଁ କରିପାରିବି ଆପଣ ଯାହା ବାଛିଛନ୍ତି ତାହା ଶେଷ କରନ୍ତୁ, ଶେଷ ପଦକ୍ଷେପ ଭାବରେ ଅଭିଗମ୍ୟତାକୁ ବ୍ୟବହାର କରନ୍ତୁ ନାହିଁ | ମୋ ଅଭିଜ୍ଞତାରେ, ଯେତେବେଳେ ଏହା ଏଡ଼ାଇ ଦିଆଯାଏ | ARIA ସମ୍ପର୍କ, ଫୋକସ୍ ମ୍ୟାନେଜମେଣ୍ଟ, କୀବୋର୍ଡ୍ ଆଚରଣ - ସେଗୁଡ଼ିକ ପଲିସ୍ ନୁହେଁ | ଜିନିଷଟି ପ୍ରକୃତରେ କାମ କରୁଥିବା ବିଷୟଗୁଡ଼ିକର ଏକ ଅଂଶ | ମୋ GitHub ରେପୋରେ ପୂର୍ଣ୍ଣ ଉତ୍ସ କୋଡ୍ ଦେଖନ୍ତୁ | ପରବର୍ତ୍ତୀ ପଠନ | ଏହା ମାଧ୍ୟମରେ କାର୍ଯ୍ୟ କରିବା ସମୟରେ ମୁଁ ସେହି ରେଫରେନ୍ସଗୁଡ଼ିକୁ ଫେରି ଆସିଥିଲି:
ଷ୍ଟାକିଂ ପ୍ରସଙ୍ଗ (MDN) “CSS ଆଙ୍କର୍ ପୋଜିସନ୍ ଗାଇଡ୍”, ଜୁଆନ୍ ଡିଏଗୋ ରୋଡ୍ରିଗେଜ୍ | “ପପୋଭର API ସହିତ ଆରମ୍ଭ କରିବା”, ଗଡଷ୍ଟାଇମ୍ ଅବୁରୁ | ଭାସମାନ UI (floating-ui.com) CSS ଓଭରଫ୍ଲୋ (MDN)
