如何在此HTML/JQUERY代码中添加垂直滚动？_Jquery_Html_Scroll

如何在此HTML/JQUERY代码中添加垂直滚动？

jquery html scroll

如何在此HTML/JQUERY代码中添加垂直滚动？,jquery,html,scroll,Jquery,Html,Scroll,我正在努力让垂直卷轴工作。下面是HTML/JQUERY代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

我正在努力让垂直卷轴工作。下面是HTML/JQUERY代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>teste1</title>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>

<style type="text/css">
html {
font: 12px Arial, Helvetica, sans-serif;
text-align: center;
}
#conteudo, #oculto {
background: #e5e5e5;
width: 480px;
margin: auto;
padding: 10px;
border: solid 1px #ccc;
}
#conteudo h1 {
font-size: 15px;
}
#oculto {
display: none;
margin-top: 30px;
overflow: scroll; 
width: 200px; 
height: 100px;
}
</style>    

    <script type="text/javascript">
        $(document).ready(function() {
            $("h1#mostra").click(function() {
                $("div#oculto").toggle("slow");
            });
        });
    </script>

</head>

<body>

    <div id="conteudo">
    // Aqui o elemento que exibe o elemento oculto
    <h1 id="mostra">Clique aqui para exibir/ocultar um elemento</h1>
    </div>

    // aqui o elemento oculto
    <div id="oculto">
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />
        dddddddddddddddddddddddd dddddddddddddddd<br />

    </div>

</body>
</html>

我的问题。在这种情况下是否可以添加滚动条

致以最诚挚的问候，

您需要删除“显示：无”条目

更新：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>teste1</title>
      <script type="text/javascript" src="jquery-1.4.4.js"></script>


        <style type="text/css">
            html {
            font: 12px Arial, Helvetica, sans-serif;
            text-align: center;
            }
            #conteudo, #oculto {
            background: #e5e5e5;
            width: 480px;
            margin: auto;
            padding: 10px;
            border: solid 1px #ccc;
            }
            #conteudo h1 {
            font-size: 15px;
            }

        </style>    



    </head>

    <body>

        <script type="text/javascript">
            $(document).ready(function() {
            $("#mostra").click(function() {          
            $(".oculto").toggle("slow");
            });
            });
        </script>

        <div id="conteudo">
            // Aqui o elemento que exibe o elemento oculto
            <h1 id="mostra">Clique aqui para exibir/ocultar um elemento</h1>
        </div>

        // aqui o elemento oculto
        <div id="oculto" class="oculto">
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />

        </div>

    </body>
</html>


测试1
html{
字体：12px Arial，Helvetica，无衬线；
文本对齐：居中；
}
#孔杜多，奥克托{
背景：#e5；
宽度：480px；
保证金：自动；
填充：10px；
边框：实心1px#ccc；
}
#conteudo h1{
字体大小：15px；
}
$（文档）.ready（函数（）{
$（“#mostra”）。单击（函数（）{
$（“.oculto”）。切换（“慢速”）；
});
});
//你的眼睛是什么样子的
社会团体/文化和元素
//奥克尔托元素酒店
dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

dddddddddddddddddddddddddddddddddddddddddd

这可能是您想要的吗

谢谢你的回复。但它不起作用。在我这样做之后，切换不再工作。一些线索？#oculto风格定义了两次。也许它们相互冲突？与上面的Updated代码。。。这似乎有效。。。在jquery中指定ID或类时要小心。ID为“.xxx”，类为“#xxx”。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>teste1</title>
      <script type="text/javascript" src="jquery-1.4.4.js"></script>


        <style type="text/css">
            html {
            font: 12px Arial, Helvetica, sans-serif;
            text-align: center;
            }
            #conteudo, #oculto {
            background: #e5e5e5;
            width: 480px;
            margin: auto;
            padding: 10px;
            border: solid 1px #ccc;
            }
            #conteudo h1 {
            font-size: 15px;
            }

        </style>    



    </head>

    <body>

        <script type="text/javascript">
            $(document).ready(function() {
            $("#mostra").click(function() {          
            $(".oculto").toggle("slow");
            });
            });
        </script>

        <div id="conteudo">
            // Aqui o elemento que exibe o elemento oculto
            <h1 id="mostra">Clique aqui para exibir/ocultar um elemento</h1>
        </div>

        // aqui o elemento oculto
        <div id="oculto" class="oculto">
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />
            dddddddddddddddddddddddd dddddddddddddddd<br />

        </div>

    </body>
</html>