OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Issues with Scroll in IOS in React js (The scroll is not visible in IOS)

  • Thread starter Thread starter Thàmím Añsãrì
  • Start date Start date
T

Thàmím Añsãrì

Guest
I was encountering issues with scrollbar behavior on iOS devices in my React project, and I found that integrating react-scrollbars-custom resolved these issues effectively.

npm install react-scrollbars-custom

`import React from 'react'; import { Card } from 'antd'; import { Scrollbar } from 'react-scrollbars-custom';

const MyCardComponent = ({ auraDemoConversation, AuraConversation }) => { return ( <Card bordered={false} className="shadow-md rounded-md w-full h-56 overflow-y-auto"> <Scrollbar> {(auraDemoConversation && auraDemoConversation.length > 0 ? auraDemoConversation : AuraConversation).map((line, index) => (<div key={index}> <div hiiii: <div hii </div> ))} </Scrollbar> </Card> ); }; export default MyCardComponent;`

After integrating react-scrollbars-custom, the scrollbar issues on iOS were resolved. The scrollbar now behaves consistently across different devices and browsers.

I hope this helps others facing similar issues with scrollbar behavior on iOS devices. If you have any questions or need further details, feel free to ask!
<p>I was encountering issues with scrollbar behavior on iOS devices in my React project, and I found that integrating react-scrollbars-custom resolved these issues effectively.</p>
<p>npm install react-scrollbars-custom</p>
<p>`import React from 'react';
import { Card } from 'antd';
import { Scrollbar } from 'react-scrollbars-custom';</p>
<p>const MyCardComponent = ({ auraDemoConversation, AuraConversation }) => {
return (
<code><Card bordered={false} className="shadow-md rounded-md w-full h-56 overflow-y-auto"> <Scrollbar></code> {(auraDemoConversation && auraDemoConversation.length > 0 ? auraDemoConversation : AuraConversation).map((line, index) => (<code><div key={index}></code> <div hiiii:
<div hii <code> </div> ))} </Scrollbar> </Card></code>
);
};
export default MyCardComponent;`</p>
<p>After integrating react-scrollbars-custom, the scrollbar issues on iOS were resolved. The scrollbar now behaves consistently across different devices and browsers.</p>
<p>I hope this helps others facing similar issues with scrollbar behavior on iOS devices. If you have any questions or need further details, feel free to ask!</p>
Continue reading...
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top