Question

此网站上有大量此问题。但他们似乎都没有帮助我。我正在尝试使用javascript和jQuery编写基于文本的浏览器游戏，作为构建我的编码知识的基础。

我有一个javascript代码：

const person = [{
    name: 'hello',
    id: 1
  },
  {
    name: 'javascript',
    id: 2
  },
  {
    name: 'world',
    id: 3
  }
];

const selected = [2, 3];

const normalized = person.map((obj, i) => selected.includes(obj.id) ? Object.assign({}, obj, {
  checked: true
}) : obj);

console.log(normalized);

对于滚动到底部的功能，这非常有效，但是我在世界上如何允许用户向上滚动...以查看已发生的事情？

我还没有以这种方式发现问题，所以我不相信它是重复的。如果是这样，我想我会继续搜索。

- 编辑 -

好的......我猜我的描述不够具有描述性，所以让我试着解决这个问题。

以下是我的代码的第一部分（我知道它现在没有设置最好的，但这就是我学习的原因）：

使用Javascript / JQuery的

    window.setInterval(function(e) { //This function is the only way to get the scroll to bottom to work, for me.
        e = document.getElementById('console'); //'console' is the area that outputs the system text, after a user answers questions.
        e.scrollTop = e.scrollHeight - e.clientHeight; //It works without the '- e.clientHeight', but I read that this is proper.
    });

所以，基本上，在滚动到底部工作之后，我注意到用户可能想要向上滚动以查看之前的语句所说的内容。现在，他们无法向上滚动。如果我需要将所有其他代码组合在一起就可以了，但我找不到适合我的代码。我已经尝试过从所有相关帖子中找到的所有建议，但没有成功。我现在已经在这里工作了大约12个小时，而且我自己也无法解决这个问题。

HTML

    window.setInterval(function(e) { //'#console' scrolls to bottom <-- how do I let the user scroll up to review?
        e = document.getElementById('console');
        e.scrollTop = e.scrollHeight - e.clientHeight;
    });

    onkeyup = (function(e) { //On <enter> erase data in the ("input")
        if (e.keyCode == 13) {
            $("input").val("");
            e.preventDefault();
            return false;
        }
    });


    $(document).ready(function() {

        $("#console").fadeIn(3000); //A console to output answers and scenarios to

        $("form").submit(function() { //User input
            var input = $("#command_line").val(); //A nifty box to put your answers in

            var check = false;
            function check() { //If you don't follow directions this happens
            check = true;
            }


            //startup
            var yes = false;
            var no = false;
            currentarea = "Start";
            function start() { 
                while (yes != true && no != true && currentarea == "Start") { 
                    if (input == "yes") {
                        yes = true;
                        $("<p>Great! What is your gender? Type <u><b>m</b></u> for Male or <u><b>f</b></u> for Female.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                        clothes = s_clths;
                        document.getElementById("clothes").innerHTML = clothes;
                        currentarea = "Gender Assignment";
                        check();
                        return currentarea;
                    }
               }
               start();
         });

CSS

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="scripts/jquery.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>

    <body>

        <div id="banner">
            <p>Welcome To ! An Epic Journey Awaites You!</p>
        </div>

        <div id="console_wrapper">
            <div id="console">
                <p id="Start">Would you like to begin your adventure? Type <u><b>yes</b></u> or <u><b>no</b></u>.</p>
                <p id="message_help" style="display: none;">Some help, if you need it.</p>
                <!--
                PLACEHOLDER: THIS IS WHERE YOUR CHOICES ARE INPUTED
                -->
                <div id="placeholder"></div>
            </div>
        </div>

        <form id="form" onsubmit="return false;">
            <input type="text" size="50" autofocus="autofocus" autocomplete="off" id="command_line" />
        </form>
        <script type="text/javascript" src="scripts/game.js"></script>
    </body>
    </html>

Answer 1

我的问题的答案是：

$("#console").animate({ scrollTop: "999999999px" }, 'slow'); //Scroll the console to the bottom.

自动滚动到div底部后，启用用户向上滚动？

1 个答案: