js scrollleft实现滚动效果|极客笔记

js scrollleft实现滚动效果

在网页制作中，经常会遇到需要实现滚动效果的需求，比如图片轮播、新闻滚动等。其中，scrollLeft是一个常用的属性，用于控制元素的水平滚动。本文将详细介绍如何使用JavaScript的scrollLeft属性实现滚动效果。

一、scrollLeft属性

在DOM中，元素的滚动位置是由其scrollLeft属性值决定的，该属性表示元素的左边界与元素视窗左边界之间的距离。通过设置scrollLeft属性值，可以控制元素的水平滚动。

下面是一个简单的示例，通过JavaScript来改变元素的scrollLeft值实现水平滚动效果：

<!DOCTYPE html>
<html>
<head>
    <title>ScrollLeft示例</title>
    <style>
        #container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            white-space: nowrap;
        }

        .item {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

    <script>
        let container = document.getElementById('container');

        function scroll() {
            container.scrollLeft += 1;
        }

        setInterval(scroll, 10);
    </script>
</body>
</html>

在上面的示例中，我们创建了一个容器container，其中包含了5个子元素。通过不断增加scrollLeft的值，让容器元素产生了水平滚动的效果。

二、应用场景

滚动效果在很多网页设计中都是常见的，比如图片轮播、新闻滚动等。下面我们分别介绍两种常见的应用场景。

1. 图片轮播

图片轮播是一种常见的网页设计方式，通过不断滚动展示不同的图片，可以吸引用户的注意力。下面是一个简单的图片轮播示例：

<!DOCTYPE html>
<html>
<head>
    <title>图片轮播示例</title>
    <style>
        #container {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .images {
            display: flex;
            width: 1500px;
            transition: all 1s;
        }

        .image {
            flex: 0 0 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="images">
            <div class="image" style="background-color: red;"></div>
            <div class="image" style="background-color: green;"></div>
            <div class="image" style="background-color: blue;"></div>
            <div class="image" style="background-color: yellow;"></div>
            <div class="image" style="background-color: orange;"></div>
        </div>
    </div>

    <script>
        let container = document.getElementById('container');
        let images = document.querySelector('.images');

        function scroll() {
            images.style.transform = `translateX(-${container.scrollLeft}px)`;
        }

        setInterval(scroll, 10);
    </script>
</body>
</html>

在上面的示例中，我们通过改变translateX的值来实现图片轮播效果，当容器元素水平滚动时，不断改变图片的位置，从而实现了图片轮播效果。

2. 新闻滚动

新闻滚动是一种常见的展示方式，通过滚动展示不同的新闻内容，吸引用户关注。下面是一个简单的新闻滚动示例：

<!DOCTYPE html>
<html>
<head>
    <title>新闻滚动示例</title>
    <style>
        #container {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .news {
            display: block;
            white-space: nowrap;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="news">
            <div>新闻1：今天天气晴朗</div>
            <div>新闻2：各地启动抗洪应急响应</div>
            <div>新闻3：世界杯即将开幕</div>
            <div>新闻4：国家大气污染防治攻坚战启动</div>
            <div>新闻5：人民币对美元汇率下调</div>
        </div>
    </div>

    <script>
        let container = document.getElementById('container');
        let news = document.querySelector('.news');

        function scroll() {
            if (container.scrollLeft + container.clientWidth >= news.clientWidth) {
                container.scrollLeft = 0;
            } else {
                container.scrollLeft += 1;
            }
        }

        setInterval(scroll, 10);
    </script>
</body>
</html>

在上面的示例中，我们通过判断容器元素的scrollLeft值是否超过了新闻内容的宽度，来实现了新闻内容循环滚动的效果。