javascript - 如何将滚动条附加到 div 部分？-6ren

javascript - 如何将滚动条附加到 div 部分？

转载作者：行者123 更新时间：2023-11-28 12:04:00

25

4

我刚刚用几个 div-s 和少量 CSS 和 javascript 写了一个页面。我不知道如何将滚动条插入到我的一个 div 中。代码并不难理解。代码中包含 CSS 和 javascript。

<html>
<head>
<style>
#container 
{
    vertical-align: top;
    width: 98%;
    height: 90%;
    padding: 5px;
}
#discussion {
    width: 99%;
    height: 90%;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
    /*position: absolute; bottom: 0; left: 0;*/
    position: relative;
}
#content
{
    overflow-y: auto;
    position: absolute; bottom: 0; left: 0;
}
#message {
    width: 100%;
    vertical-align:bottom;
    padding: 5px;
    border: 1px solid #ccc;
}
</style>
<script>
function init(){
    var message = $('#message');
    var content = $('#content');
    message.keypress(function (e) {
        if (e.keyCode == 13 && message.val().length > 0) {
            content.append(message.val() + "<br/>");
            //content.scrollTop(discussion.get(0).scrollHeight); //works fine with top to down
            message.val('').focus();
        }
    });
};
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body onload="javascript:init();">
     <div id="container">
        <div id="discussion">
            <div id="content"></div>
        </div>
        <input id="message" type="text" placeholder="Hit Enter button to insert"/> 
     </div>
</body>
</html>

当内容离开讨论部分时，我需要滚动条。事情是当我插入一些带有从上到下流动滚动条的文本时工作正常。不幸的是，所有文本都必须从下到上插入。

---------------
-
-
-
-
- first text
---------------


---------------
-
-
-
- first text
- second text
---------------


---------------
- second text
- third text
- fourth text
- fifth text
- sixth text
--------------- now I need a scroll bar to see first text.

最佳答案

您将高度设置为 90%，但它不知道 90% 是什么。如果你想将它设置为 body 的 90%，你需要设置 html,body {height: 100%;}。

然后您需要删除您放置在内容上的绝对定位。

在这里工作:http://jsfiddle.net/davidpauljunior/2PpqN/

关于javascript - 如何将滚动条附加到 div 部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19762756/

25

4

0

文章推荐： css - float DIV 和 P 元素

文章推荐： javascript - 如何防止用户使用浏览器选项禁用脚本

文章推荐： css - 纯 CSS 内容选项卡 - 无法显示内容

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - 如何将滚动条附加到 div 部分？