تعیین اجرا شدن مقداری کد JavaScript دلخواه، در هنگام اسکرول (Scroll) کردن نوار اسکرول (Scrollbar) یک عنصر (Element)، با رویداد onscroll ، در JavaScript

با استفاده از رویداد onscroll در JavaScript ، می توانیم تعیین کنیم که در هنگام اسکرول (Scroll) کردن نوار اسکرول (Scrollbar) یک عنصر (Element)، مقداری کد JavaScript دلخواه اجرا شود.

به عنوان مثال، می توانیم رویداد onscroll را برای یک عنصر div ، به صورت زیر ذکر کنیم :

نکته

چنانچه بخواهیم یک عنصر (Element) دارای نوار اسکرول (Scrollbar) باشد، می توانیم مشخصه overflow: scroll در CSS را برای آن عنصر به کار ببریم.

به مثال زیر توجه کنید :

مثال لینک منبع مثال

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
          div {
              border: 1px solid black;
              width: 200px;
              height: 100px;
              overflow: scroll;
          }
        </style>
    </head>

<body>
        <div onscroll="My_Function()">
            kelidestan.com 1 <br>
            kelidestan.com 2 <br>
            kelidestan.com 3 <br>
            kelidestan.com 4 <br>
            kelidestan.com 5 <br>
            kelidestan.com 6 <br>
            kelidestan.com 7 <br>
            kelidestan.com 8 <br>
            kelidestan.com 9 <br>
            kelidestan.com 10 <br>
            kelidestan.com 11 <br>
            kelidestan.com 12
        </div>
      
        <p>
            Scroll : 
            <span id="output">
            </span>
        </p>

نتیجه :

منابع و لینک های مفید

https://www.w3schools.com/jsref/event_onscroll.asp

دسته بندی اسکرول (Scroll)، در JavaScript

نویسنده علیرضا گلمکانی

شماره کلید 27815

گزینه ها

به اشتراک گذاری (Share) در شبکه های اجتماعی

FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon

نظرات 2 2 0

حسن

۱۴۰۰/۱۰/۱۳

۰۹:۰۰

سلام ببخشید بی ربط هست ولی باید بپرسم
من میخوام از یک پایگاه نت، یک سری اطلاعات رو به سایت خودم منتقل کنم دقیقا باید چیکار کنم.
میخوام لحظه ای بروز شه

rezabm

۱۴۰۰/۱۰/۱۳

۱۸:۲۹

مرسی از شما

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)