jQuery scroll() 方法

jQuery 事件scroll() 方法用於附加一個事件處理程式到滾動事件，或者在發生滾動事件時觸發。當用戶滾動選定元素時發生。

此方法適用於所有可滾動的元素和瀏覽器視窗本身。

語法

以下是 jQuery 事件scroll() 方法的語法：

$(selector).scroll(function)

引數

此方法接受一個可選引數作為函式，如下所述：

function − 當滾動事件發生時執行的可選函式。

返回值

此方法沒有任何返回值。

示例 1

以下是 jQuery 事件scroll() 方法的基本示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    body{
        height: 110vh;
    }
</style>
</head>
<body>
</body>
<p>Scroll on the window screen</p>
<script>
    $(window).scroll(function(){
        alert("The user scrolls on the window screen.")
    })
</script>
</html>

輸出

程式執行後，當用戶滾動視窗螢幕時，會出現一個警告彈出訊息。

示例 2

以下是 jQuery scroll() 方法的另一個示例。在這種情況下，當用戶在其中滾動時，div 元素的背景顏色會改變。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 500px;
        max-height: 100px;
        height: 150px;
        overflow-y: auto;
        font-size: 20px;
        padding: 10px;
    }
</style>
</head>
<body>
</body>
<p>Scroll on the div element to change background-color</p>
<div>
    <p>The jQuery event scroll() method is used to attach an event handler to the scroll event, or triggers when scroll event occurs. it occurs when the user scroll on the selected element. This method applicable to all scrollable elements and browser window itself.</p>
</div>
<script>
    $('div').scroll(function(){
        $(this).css("background-color", "green");
    })
</script>
</html>

輸出

上面的程式顯示一個 div 元素。當用戶在這個 div 內滾動時，背景顏色變為“綠色”。

示例 3

在下面的示例中，建立了一個導航欄。當用戶點選它時，導航欄將隱藏。當用戶在 div 元素內滾動時，導航欄將顯示在頁面頂部。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 600px;
        max-height: 100px;
        height: 100px;
        overflow-y: auto;
        font-size: 20px;
        padding: 10px;
        background-color: green;
    }
    nav{
        display: block;
        width: 90%;
        margin: 0px auto;
        padding: 10px;
        background-color: black;
    }
    nav ul{
        list-style: none;
    }
    nav ul li{
        display: inline-block;
        padding: 10px;
        color: white;
    }
</style>
</head>
<body>
</body>
<p>Click on nav to hide and scroll on the div element to display nav again.</p>
<div class="demo">
    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Blog</li>
        </ul>
    </nav>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident excepturi aut sint eius, ipsam aliquid! Officia obcaecati eveniet laboriosam quidem! Hic accusamus dolores temporibus obcaecati labore ea asperiores doloremque reprehenderit!</p>
</div>
<script>
    $('nav').click(function(){
        $(this).slideToggle();
    });
    $('div').scroll(function(){
        $('nav').slideDown();
    });
</script>
</html>

輸出

程式執行後，將顯示一個包含導航欄和一些文字的 div 元素。當用戶點選導航欄時，它會隱藏。當用戶在 div 元素內滾動時，導航欄會再次出現。

jquery_ref_events.htm

列印頁面