Question

在使用Google Apps脚本发布的网络应用中，div autoscroll不起作用。你能帮忙让它发挥作用吗？谢谢。

以下是网络应用的链接： https://script.google.com/macros/s/AKfycby4jMUrDqW8HLev0HkWt36XCdtpjuSXsv2-yThkXSzA5fusfXw/exec

以下是代码：

    <!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>

Answer 1

它有效，有两个部分的问题，为什么它不是反复自动滚动div。没有捕获第一个jQuery代码，Bootstrap不会检测到jQuery代码[它给出了错误消息：未捕获错误：Bootstrap的JavaScript需要jQuery]，根据Brian的建议发布新版本后它解决了，并在此处查看了解决方案： Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery

问题的第二部分是它有错误的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>

jQuery div autoscroll在GAS中不起作用

1 个答案: