การจัดการ Scrollbar ในเว็บแอปพลิเคชันเป็นสิ่งสำคัญเพื่อให้ผู้ใช้สามารถเลื่อนดูเนื้อหาได้สะดวก โดยเฉพาะเมื่อเนื้อหามีความยาวเกินพื้นที่ของหน้าจอ ในบทความนี้ เราจะมาสร้าง Scrollbar ที่สามารถปรับแต่งได้โดยใช้ SimpleBar ซึ่งเป็นไลบรารีสำหรับจัดการ Scrollbar บน React ที่ง่ายต่อการใช้งานและสามารถปรับแต่งได้อย่างยืดหยุ่น
การนำเข้าและการตั้งค่าเบื้องต้น
ขั้นแรก เรานำเข้า SimpleBar และสไตล์ที่เกี่ยวข้องจาก simplebar-react เพื่อใช้ในการสร้าง Scrollbar
import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";
การสร้างคอมโพเนนต์ Scrollbar
ต่อมาเราจะสร้างคอมโพเนนต์ Scrollbar ที่รับ props ซึ่งประกอบด้วย children และ sx ที่ใช้สำหรับการปรับแต่งสไตล์
interface PropsType {
children: React.ReactElement | React.ReactNode;
sx: SxProps;
}
const Scrollbar = (props: PropsType) => {
const { children, sx, ...other } = props;
การตรวจสอบอุปกรณ์มือถือ
ในคอมโพเนนต์นี้ เราใช้ navigator.userAgent เพื่อตรวจสอบว่าผู้ใช้ใช้อุปกรณ์มือถือหรือไม่ หากใช่ เราจะใช้กล่องธรรมดา (<Box>
) ที่มีสไตล์ overflowX: "auto" เพื่อแสดง Scrollbar ที่เหมาะสมสำหรับมือถือ
const isMobile =
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
);
if (isMobile) {
return <Box sx={{ overflowX: "auto" }}>{children}</Box>;
}
การใช้ SimpleBar สำหรับอุปกรณ์อื่นๆ
ถ้าผู้ใช้ไม่ใช้อุปกรณ์มือถือ เราจะใช้ SimpleBarStyle ซึ่งเป็นคอมโพเนนต์ที่ถูกสร้างจาก SimpleBar และปรับแต่งให้มีความสูงเต็มที่ (maxHeight: "100%"
)
return (
<SimpleBarStyle sx={sx} {...other}>
{children}
</SimpleBarStyle>
);
};
export default Scrollbar;
สรุป
คอมโพเนนต์ Scrollbar นี้ออกแบบมาให้สามารถใช้งานได้ทั้งบนมือถือและอุปกรณ์อื่นๆ โดยใช้ Scrollbar ที่ปรับแต่งได้ผ่าน SimpleBar หรือใช้ Scrollbar เริ่มต้นสำหรับมือถือ ทั้งนี้ขึ้นอยู่กับอุปกรณ์ที่ผู้ใช้กำลังใช้งาน
คอมโพเนนต์นี้มีความยืดหยุ่นและใช้งานง่าย สามารถนำไปใช้ในโปรเจกต์ React เพื่อปรับแต่ง Scrollbar ให้เหมาะสมกับความต้องการของคุณได้เลยครับ