jQuery div autoscroll在气体中不工作_Jquery_Google Apps Script_Autoscroll

jQuery div autoscroll在气体中不工作

jquery google-apps-script

jQuery div autoscroll在气体中不工作,jquery,google-apps-script,autoscroll,Jquery,Google Apps Script,Autoscroll,在web应用程序[使用谷歌应用程序脚本发布]中，div autoscroll不工作。你能帮忙吗？多谢各位以下是指向web应用程序的链接：代码如下： <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport"

在web应用程序[使用谷歌应用程序脚本发布]中，div autoscroll不工作。你能帮忙吗？多谢各位

以下是指向web应用程序的链接：

代码如下：

    <!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


    <div class="jumbotron text-center">
        <h2>My First Bootstrap Page</h2>
        <p>Resize this responsive page to see the effect!</p>
    </div>
    <?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col1">
                    <h3>Column 1</h3>
                    <div class="item1" id="item1">
                        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit... see if it goes beyond the margin</span>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                    </div>
                </div>
                <div class="col-sm-3 col2">
                    <h3>Column 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-3 col3">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-3 col4">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
            </div>
        </div>

        <script>
            $("#item1").animate({
                scrollTop: $("#item1").height()
            }, 4000);
            setTimeout(function() {
                $("#item1").animate({
                    scrollTop: 0
                }, 4000);
            }, 4000);
            setInterval(function() {
                // 4000 - it will take 4 secound in total from the top of the page to the bottom
                $("#item1").animate({
                    scrollTop: $("#item1").height()
                }, 4000);
                setTimeout(function() {
                    $("#item1").animate({
                        scrollTop: 0
                    }, 4000);
                }, 4000);

            }, 8000);
        </script>

</body>

</html>


引导示例
我的第一个引导页面
调整此响应页面的大小以查看效果
第1栏
我爱你，我爱你，我爱你。。。看看它是否超出了边界
但是，我们必须尽可能少地进行实验
但是，我们必须尽可能少地进行实验
但是，我们必须尽可能少地进行实验
但是，我们必须尽可能少地进行实验
第2栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
第3栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
第3栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
$（“#项1”）。设置动画({
滚动顶部：$（“#项目1”）.height（）
}, 4000);
setTimeout（函数（）{
$（“#项1”）。设置动画({
滚动顶部：0
}, 4000);
}, 4000);
setInterval（函数（）{
//4000-从页面顶部到底部总共需要4秒钟
$（“#项1”）。设置动画({
滚动顶部：$（“#项目1”）.height（）
}, 4000);
setTimeout（函数（）{
$（“#项1”）。设置动画({
滚动顶部：0
}, 4000);
}, 4000);
}, 8000);

它成功了，问题的两个方面是为什么它不能重复自动滚动div。第一个jQuery代码没有被捕获，Bootstrap不会检测到jQuery代码[它给出了错误消息：未捕获错误：Bootstrap的JavaScript需要jQuery]，它在根据Brian的建议发布新版本后得到解决，并在这里查看了解决方案：

问题的第二部分是它有错误的CSS代码，以前的CSS代码是：

.col1{高度：180px；溢出-y:滚动；背景：黄色；}

.col2{高度：180px；溢出-y:滚动；背景：#6BC0FF；}

.col3{高度：180px；溢出-y:滚动；背景：橙色；}

.col4{高度：180px；溢出-y:滚动；背景：绿色；}

新修订的CSS代码：

.item1{高度：180px；溢出-y:滚动；背景：黄色；}

.col2{高度：180px；溢出-y:滚动；背景：#6BC0FF；}

.col3{高度：180px；溢出-y:滚动；背景：橙色；}

.col4{高度：180px；溢出-y:滚动；背景：绿色；}

以下是HTML文件的修订代码：

    <!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


    <div class="jumbotron text-center">
        <h2>My First Bootstrap Page</h2>
        <p>Resize this responsive page to see the effect!</p>
    </div>
    <?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col1">
                    <h3>Column 1</h3>
                    <div class="item1" id="item1">
                        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit... see if it goes beyond the margin</span>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                    </div>
                </div>
                <div class="col-sm-3 col2">
                    <h3>Column 2</h3>
                    <div id="item2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                    </div>
                </div>
                <div class="col-sm-3 col3">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-3 col4">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
            </div>
        </div>

        <script>
            $("#item1").animate({
                scrollTop: $("#item1").height()
            }, 4000);
            setTimeout(function() {
                $("#item1").animate({
                    scrollTop: 0
                }, 4000);
            }, 4000);
            setInterval(function() {
                // 4000 - it will take 4 secound in total from the top of the page to the bottom
                $("#item1").animate({
                    scrollTop: $("#item1").height()
                }, 4000);
                setTimeout(function() {
                    $("#item1").animate({
                        scrollTop: 0
                    }, 4000);
                }, 4000);

            }, 8000);

            console.log($(".col1").height());
            console.log($(".item1").height());
        </script>

</body>

</html>


引导示例
我的第一个引导页面
调整此响应页面的大小以查看效果
第1栏
我爱你，我爱你，我爱你。。。看看它是否超出了边界
但是，我们必须尽可能少地进行实验
但是，我们必须尽可能少地进行实验
但是，我们必须尽可能少地进行实验
但是，我们必须尽可能少地进行实验
第2栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
第3栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
第3栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
$（“#项1”）。设置动画({
滚动顶部：$（“#项目1”）.height（）
}, 4000);
setTimeout（函数（）{
$（“#项1”）。设置动画({
滚动顶部：0
}, 4000);
}, 4000);
setInterval（函数（）{
//4000-从页面顶部到底部总共需要4秒钟
$（“#项1”）。设置动画({
滚动顶部：$（“#项目1”）.height（）
}, 4000);
setTimeout（函数（）{
$（“#项1”）。设置动画({
滚动顶部：0
}, 4000);
}, 4000);
}, 8000);