jQuery自动上下滚动div

诺梅什·德席尔瓦(Nomesh DeSilva)

我写了一个小提琴,它可以自动上下滚动div,效果很好。但是向下滚动时会出现问题,它不显示最后一行(在这种情况下为“ String4”)。有人可以帮我解决这个问题吗?

<div class="container">
<div class="content">
    <p>string1</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string</p>
    <p>string0</p>
    <p>string1</p>
    <p>string2</p>
    <p>string3</p>
    <p>string4</p>
     <p> </p>
</div>

和js的东西:

   $(document).ready(function() {

    if ($('.content').height() > $('.container').height()) {
        setInterval(function () {

            start();
       }, 3000); 

    }
});

function animateContent(direction) {  
    var animationOffset = $('.container').height() - $('.content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }

    console.log("animationOffset:"+animationOffset);
    $('.content').animate({ "marginTop": (animationOffset)+ "px" }, 5000);
}

function up(){
    animateContent("up")
}
function down(){
    animateContent("down")
}

function start(){
 setTimeout(function () {
    down();
}, 2000);
 setTimeout(function () {
    up();
}, 2000);
   setTimeout(function () {
    console.log("wait...");
}, 5000);
} 
尼尔玛

这是很好的解决方案

仅在这里检查

$(document).ready(function() {

    if ($('.content').height() > $('.container').height()) {
        setInterval(function () {

            start();
       }, 3000); 
   
    }
});

function animateContent(direction) {  
    var animationOffset = $('.container').height() - $('.content').height()-30;
    if (direction == 'up') {
        animationOffset = 0;
    }

    console.log("animationOffset:"+animationOffset);
    $('.content').animate({ "marginTop": (animationOffset)+ "px" }, 5000);
}

function up(){
    animateContent("up")
}
function down(){
    animateContent("down")
}

function start(){
 setTimeout(function () {
    down();
}, 2000);
 setTimeout(function () {
    up();
}, 2000);
   setTimeout(function () {
    console.log("wait...");
}, 5000);
}    
.container { height:250px; background:red; padding:0 10px; overflow:hidden; }
.content { background:#eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="content">
        <p>string1</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string</p>
        <p>string0</p>
        <p>string1</p>
        <p>string2</p>
        <p>string3</p>
        <p>string4</p>
    </div>
</div>

制作

var animationOffset = $('.container').height() - $('.content').height()-30;

可能会因为填充而中断您的身高。

我已经删除了您的空p标签。

这是小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在jQuery滚动上淡入和淡出div

来自分类Dev

如何在滚动上左右移动div?

来自分类Dev

jQuery如何在上下滚动时调整div的大小

来自分类Dev

更改滚动上的div高度

来自分类Dev

Javascript页面自动上下滚动

来自分类Dev

在div中上下滚动

来自分类Dev

在滚动上沿圆形路径移动div

来自分类Dev

固定div与水平滚动上的相邻div重叠

来自分类Dev

如何在窗口滚动上上下移动div

来自分类Dev

自动滚动div

来自分类Dev

使div上下滚动

来自分类Dev

在溢出的div的水平滚动上,填写进度条

来自分类Dev

查询太多滚动上下文

来自分类Dev

更改滚动上的Div显示元素

来自分类Dev

Javascript页面自动上下滚动

来自分类Dev

在jQuery中自动滚动div的内容

来自分类Dev

在页面滚动上加载div和动画

来自分类Dev

如何不使用jQuery自动滚动特定的div?

来自分类Dev

jQuery窗口滚动上的除法动画问题

来自分类Dev

滚动上的jQuery高亮按钮

来自分类Dev

jQuery在窗口滚动上设置动画

来自分类Dev

jQuery在div上上下滚动

来自分类Dev

滚动上的jQuery Animate标头

来自分类Dev

jQuery自动将div滚动到div并返回顶部

来自分类Dev

计数器在javascript中的特定div滚动上开始

来自分类Dev

滚动上方的Div时固定标题

来自分类Dev

在jQuery中的页面滚动上显示5 div

来自分类Dev

在滚动上滑动 Div

来自分类Dev

使用 jQuery 上下滚动到 div id