Блог

Главная - Вопросы по программированию - Как добавить вертикальную прокрутку в этот HTML / JQUERY-код?

Как добавить вертикальную прокрутку в этот HTML / JQUERY-код?

#jquery #html #scroll

#jquery #HTML #прокрутка

Вопрос:

Я испытываю трудности с тем, чтобы заставить вертикальную прокрутку работать. Вот 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>

Мне нужно добавить прокрутку в «#oculto». Я добавил этот код, но он не работает:

 #oculto {
display: none;
margin-top: 30px;
overflow: scroll; 
width: 200px; 
height: 100px;
}

Мой вопрос. Возможно ли добавить прокрутку в этой ситуации?

С наилучшими пожеланиями,

Ответ №1:

Это -> http://jsfiddle.net/Husar/yYcsU/92 / возможно, то, что вы хотите?

Ответ №2:

Вам нужно будет удалить запись «display: none;».

Обновить:

 <!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. Спасибо за ответ. Но это не работает. После того, как я это сделаю, переключение больше не работает. Какие-нибудь подсказки?

2. стиль #oculto определяется дважды. Возможно, они конфликтуют?

3. С обновленным кодом выше … это, кажется, работает… Будьте осторожны, указывая идентификатор или КЛАСС в jquery. Идентификатор «.xxx», а КЛАСС «#xxx».