页面向上滚动

最新推荐文章于 2022-11-28 10:00:12 发布

weixin_30653023

最新推荐文章于 2022-11-28 10:00:12 发布

阅读量384

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/niluiquhz/p/10282956.html

版权

#页面或者div向上无缝滚动

1.css:

    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .container {
        position: relative;
        top: 0;
    }

    .container div {
        width: 500px;
        height: 500px;
        border: 1px solid chartreuse;
        font-size: 100px;
        line-height: 500px;
        font-weight: bold;
        color: black;
        text-align: center;
        text-shadow: 3px 5px 1px salmon;
        margin-left: calc(50% - 250px);
    }

2.html

<body>
    <div class="container">
        <div>11111111 </div>
        <div>2222 2</div>
        <div>333 333</div>
        <div>444444</div>
        <div>5555</div>
    </div>
</body>

3.js (方法一:)

  var scrolltop = $('.container').height() - $(window).height();
    if (scrolltop > 0) {
        var time = scrolltop / 40;
        $('.container').css('transition', 'top ' + time + 's linear');
        scrolltop = -scrolltop;
        $('.container').css('top', scrolltop + 'px');
    }

js方法二:

 function scrollPage(speed, delay) {
        var timer = null
        speed = JSON.stringify(speed)
        delay = JSON.stringify(delay)
        var Ospeed = speed || 20 //设置滚动速度
        var Ostart = 0//设置初始位置
        var Odelay = delay || 2 // 设置页面滚动延迟
        var scrolltop = $('.container').height() - $(window).height(); //计算滚动距离

        timer = function () {
            if (scrolltop > 0) {
                $('.container').css('position', 'relative')
                $('.container').css('top', Ostart + 'px');
            }
            Ostart--
            if (-Ostart >= scrolltop) {
                Ostart = -scrolltop
            }
        }

        setTimeout(function () {
            setInterval(timer, Ospeed);
        }, Odelay * 1000)

        function scrollToBottom() {

        }
    }
    scrollPage(10, 0)

第一种方法是用transition来滚动,偏css一点.但是低版本的ie可能会有bug.
第二种方法是利用js来一直改变css中的top属性进行滚动.更灵活一点

粘贴复制即可查看效果

转载于:https://www.cnblogs.com/niluiquhz/p/10282956.html

weixin_30653023

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面向上滚动

#页面或者div向上无缝滚动1.css: body { margin: 0; padding: 0; overflow: hidden; } .container { position: relative; top: 0; } .container div { ...
复制链接

扫一扫