پاسخ داده شد
0
0

چطور در react به یک المان html اسکرول کنیم؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

فرض کنید در یک صفحه html قرار داریم و می خواهیم با کلیک بر روی یک باتن، به یک المان خاص scroll کنیم. برای این کار می توانیم از تابع scrollIntoView استفاده کنیم.

کافی است تا برای المانی که می خواهیم نهایتاً به آن اسکرول کنیم یک رفرنس یا ref تعریف کنیم و بعد در تابع کلیک باتن مان، تابع scrollIntoView را روی رفرنس آن المان فراخوانی کنیم:

import { useRef } from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <button onClick={handleClick}>Scroll to element</button>

      <div style={{ height: '150rem' }} />

      <div ref={ref} style={{ backgroundColor: 'lightblue' }}>
        Coding Beauty
      </div>

      <div style={{ height: '150rem' }} />
    </div>
  );
}
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت