Проблема с нижней полосой прокрутки

sifilis · August 28, 2012

Всем здрасьте. Решил сделать собственную карусель, с гейшами и нардами, в итоге родил вот такую небольшую кодовёрстку:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Фотон</title>

    <script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            $("div.children").each(function() {
                $(this).css("width", $(window).width());
            });

            $("div.parent").css("width", $("div.children").size() * $(window).width());

            $(window).bind("resize", function() {
                $("div.children").each(function() {
                    $(this).css("width", $(window).width());
                });

                $("div.parent").css("width", $("div.children").size() * $(window).width());
            });

            $("a.next").click(function() {
                $("div.children").eq(0).animate( { marginLeft: -1 * $(window).width() }, 500, function() {
                        $(this).appendTo($("div.parent"));
                        $(this).css("margin", 0);
                    }

                );
            });

            $("a.prev").click(function() {
                $("div.children").eq($("div.children").size() - 1).css("visibility","hidden"); //на всякий случай скрываем элемент
                $("div.children").eq($("div.children").size() - 1).prependTo($("div.parent")); //перемещаем элемент в начало
                $("div.children").eq(0).css("marginLeft", -1 * $(window).width()); //отбрасываем элемент влево
                $("div.children").eq(0).css("visibility","visible"); //отображаем элемент обратно
                $("div.children").eq(0).animate( {marginLeft: 0}, 500 );
            });
        });
    </script>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .parent {
            height: 100px;
            overflow: hidden;
        }

        .children {
            float: left;
            height: 100px;
        }
    </style>
</head>

<body>
    <div style="" class="parent">

        <div style="background: red;"   class="children"></div>
        <div style="background: black;" class="children"></div>
        <div style="background: green;" class="children"></div>

    </div>

    <a href="#" title="" class="prev">Туда</a><br /><br />
    <a href="#" title="" class="next">Сюда</a><br /><br />
</body>

</html>

Однако есть небольшая проблема: нижняя полоса прокрутки жиреет без стыда и совести на всю ширину блока с классом parent. Единственный вариант как убрать нижнюю полосу прокрутки вижу только в том, чтобы задать для overflow-x: hidden для body. Но тогда нижняя полоса прокрутки вообще никогда не будет показываться, а хотелось бы, чтобы она появлялась (естественно, что не во всю ширину блока с классом parent) при ширине браузера меньше 1000 пикселей. Какой выход можно найти из этой ситуации?

Edited August 28, 2012 by sifilis

Sign In

Проблема с нижней полосой прокрутки

Question

sifilis

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information