Question

我正在尝试构建一个div，它代表一个带有滚动代码的框。我希望代码从div的顶部和顶部（特别是div的边框）滚动，而不会在页面的其余部分显示。我尝试使用CSS overflow属性，但我似乎无法正确使用它。

这是我目前的代码。如果你在JSFiddle或其他测试人员中运行它，文本将继续向上流过div的边界。当它离开边界时如何让它隐藏起来？

HTML：

<body>
    <div id = "code_box">
        <div id = "code_wrap">
            <div class = "xml_text">
                <code>XML text here will slowly scroll up at a fixed speed.  Lines pushed out of the page will be removed.</code>   
            </div>
        </div>
    </div>
</body>

CSS：

html,body {
    height:98%; 
}
body {
    background-color: lightblue;
}
#code_box {
    margin: 10px;
    padding-left: 5px;
    width: 45%;
    height: 100%;
    background-color: black;
    border-radius: 20px;
    border-color: silver;
    border-style: double;
}
#code_wrap{
    height: 100%;
    overflow: hidden;
}
.xml_text {
    position:absolute;
    overflow: hidden;
    bottom: 0;
    width: 43%;
    color: white;
    padding: 10px;
    padding-bottom:20px;
}

Jquery的：

$(document).ready(
    function(){
        alert("running");

        $('#code_box').click(
            function(){
                $('.xml_text').animate({

                    height:'+=1em'
                });
                $('#code_wrap').append("<div class = 'xml_text'><code>SomeExampleCode</code></div>");

            });
    });

如何在动画文本元素离开div边框时隐藏它们

0 个答案: