fix: updated scroll behavior

deriv-com · Aug 28, 2024 · 5b5ffdd · 5b5ffdd
1 parent d7d5fc5
commit 5b5ffdd
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx
@@ -85,13 +85,21 @@ const Purchase = () => {
     };
 
     const responsivePurchaser = useRef(null);
+    const responsiveSize = window.innerWidth < 763;
     const scrollToPurchaseContainer = () => {
         const purchaseContainer = document.getElementById('purchase_container');
         if (purchaseContainer) {
             purchaseContainer.scrollIntoView({ block: 'center', behavior: 'smooth' });
         }
     };
 
+    const scrollToContractsFormContainer = () => {
+        const contractsFormContainer = document.getElementById('trading_socket_container');
+        if (contractsFormContainer) {
+            contractsFormContainer.scrollIntoView({ block: 'start', behavior: 'smooth' });
+        }
+    };
+
     useEffect(() => {
         const handleScroll = () => {
             const purchaseSection = document.querySelector('.quill-purchase-section');
@@ -296,6 +304,8 @@ const Purchase = () => {
                             onClick={() => {
                                 triggerClick('#close_confirmation_container');
                                 hidePurchaseResults();
+                                if (responsiveSize) scrollToContractsFormContainer();
+
                             }}
                         >
                             <LabelPairedXmarkMdRegularIcon />
@@ -359,6 +369,7 @@ const Purchase = () => {
                         onClick={() => {
                             triggerClick('#close_confirmation_container');
                             hidePurchaseResults();
+                            if (responsiveSize) scrollToContractsFormContainer();
                         }}
                     >
                         <LabelPairedXmarkMdRegularIcon />