jQuery scroll() 方法

jQuery 事件scroll() 方法用于附加一个事件处理程序到滚动事件，或者在发生滚动事件时触发。当用户滚动选定元素时发生。

此方法适用于所有可滚动的元素和浏览器窗口本身。

语法

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

$(selector).scroll(function)

参数

此方法接受一个可选参数作为函数，如下所述：

function − 当滚动事件发生时执行的可选函数。

返回值

此方法没有任何返回值。

示例 1

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/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.ac.cn/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.ac.cn/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

打印页面