                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

scrollleft不起作用，我这个简单的例子有没有人帮我完善下左右滚动发给我谢谢啊

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

#div1{

margin-left: 50px;

width: 100px;

height: 25px;

background: red;

padding-top: 5px;

}

#div2{

height: 20px;

background: gray;

overflow: hidden;

}

ul{

list-style: none;

height: 20px;

}

li{

line-height: 20px;

float: left;

width: 25px;

}

</style>

<script type="text/javascript">

window.onload=function(){

var div2=document.getElementById("div2")

var ul1=document.getElementById("ul1")

var ul2=document.getElementById("ul2")

ul2.innerHTML=ul1.innerHTML

div2.scrollLeft=30

}

</script>

</head>

<body>

<div id="div1">

<div id="div2">

<ul id="ul1">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

<ul id="ul2"></ul>

</div>

</div>

</body>

</html>

这个是我简写的代码

我发现的是ul里面的内容不够显示会挤到div2下方而不是水平显示超出的范围，

这个可能导致scrollleft不起作用，不知道怎么解决

Hong

2017-01-15

源自：信息滚动效果制作 2-3

关注问题我要回答

6670

操作

收起

5 回答

背着行囊独自流浪回答被采纳 +3 积分
2017-01-16

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    #div1 {
        margin-left: 50px;
        width: 100px;
        height: 25px;
        background: red;
        padding-top: 5px;
    }
    
    #div2 {
        /* 去除两个行内块级元素边距 */
        font-size: 0;
        /* 不换行 */
        white-space: nowrap;
        height: 20px;
        background: gray;
        overflow: hidden;
    }
    
    ul {
        /* 设置为行内块级元素 */
        display: inline-block;
        /* 重写font-size */
        font-size: 15px;
        list-style: none;
        height: 20px;
    }
    
    li {
        line-height: 20px;
        float: left;
        width: 25px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var div2 = document.getElementById("div2")
        var ul1 = document.getElementById("ul1")
        var ul2 = document.getElementById("ul2")
        ul2.innerHTML = ul1.innerHTML;

        var speed = 50;
        var tag = 1;

        setInterval(function() {
            if (div2.scrollLeft === 0) {
                tag = 1;
            }
            if (div2.scrollLeft === ul1.scrollWidth) {
                tag = -1;
            }
            div2.scrollLeft += tag;
        }, speed);
    }
    </script>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <ul id="ul1">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <ul id="ul2"></ul>
        </div>
    </div>
</body>

</html>

0 回复有任何疑惑可以回复我~

#1

Hong 提问者

你的两次写法都没有把<li>5</li><li>6</li>显示出来是什么原因？

2017-01-16 回复有任何疑惑可以回复我~

#2

背着行囊独自流浪回复 Hong 提问者

给ul设置宽度150px就可以了。

2017-01-16 回复有任何疑惑可以回复我~

香宝的夫差
2017-08-04

将li的css设置成这样，就无法滚动，为何

0 回复有任何疑惑可以回复我~

#1

香宝的夫差

使用scrollLeft的必要条件是：第一：此标签的内容宽度超过了标签本身的宽度。第二：scrollLeft的值范围是在一定范围内的，不能无限增大。

2017-08-04 回复有任何疑惑可以回复我~

背着行囊独自流浪
2017-01-16

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    #div1 {
        margin-left: 50px;
        width: 100px;
        height: 25px;
        background: red;
        padding-top: 5px;
    }
    
    #div2 {
        /* 去除两个行内块级元素边距 */
        font-size: 0;
        /* 不换行 */
        white-space: nowrap;
        height: 20px;
        background: gray;
        overflow: hidden;
    }
    
    ul {
        /* 设置为行内块级元素 */
        display: inline-block;
        /* 重写font-size */
        font-size: 15px;
        list-style: none;
        height: 20px;
    }
    
    li {
        line-height: 20px;
        float: left;
        width: 25px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var div2 = document.getElementById("div2")
        var ul1 = document.getElementById("ul1")
        var ul2 = document.getElementById("ul2")
        ul2.innerHTML = ul1.innerHTML;

        // 1000 / 60，最佳滚动频率
        var speed = 17;

        setInterval(function() {
            div2.scrollLeft++;

            // 滚动一半时，拉回起点
            if (div2.scrollLeft === ul1.scrollWidth) {
                div2.scrollLeft = 0;
            }
        }, speed);
    }
    </script>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <ul id="ul1">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <ul id="ul2"></ul>
        </div>
    </div>
</body>

</html>

0 回复有任何疑惑可以回复我~

#1

香宝的夫差

如果将li不float 左滚动无法实现，就像下图

2017-08-04 回复有任何疑惑可以回复我~

Hong 提问者
2017-01-16

有没有人能在基础上修改下给我参考下，谢谢

0 回复有任何疑惑可以回复我~

背着行囊独自流浪
2017-01-15

如图，设置#div2不换行，ul为行内块级元素即可。

0 回复有任何疑惑可以回复我~

#1

Hong 提问者

不行啊，你能不能在我的基础上帮我把代码完善下我参考下。

2017-01-16 回复有任何疑惑可以回复我~

#2

背着行囊独自流浪回复 Hong 提问者

完善了，试试。

2017-01-16 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

信息滚动效果制作

参与学习 47751 人
解答问题 321 个

萌妹子带您快速学习滚动效果，掌握无缝滚动和歇间性滚动的制作方法

scrollleft不起作用，我这个简单的例子有没有人帮我完善下左右滚动发给我谢谢啊

我要回答关注问题

意见反馈帮助中心 APP下载