Получение прокручиваемой области фиксированной ширины - PullRequest
Новая
       4

Получение прокручиваемой области фиксированной ширины

0 голосов
/ 02 декабря 2010

Мне нужен вертикально прокручиваемый div определенной ширины.Однако установка ширины, скажем, 200px фактически даст мне (например) 190px доступного пространства и 10px полосы прокрутки, например 

#area {
  display: inline-block;
  width: 200px;
  overflow: auto;
}
...
<div id="area">(data using max. 200px of width)</div>

Поскольку ей не хватает ширины полосы прокрутки как фактического пространства,Я получаю минимальную, почти бесполезную (и очень некрасивую) горизонтальную полосу прокрутки.

Есть ли способ получить размер полосы прокрутки (помимо разницы со следующим элементом, кажется слишком хакерским) или простоскажем "ширина-без полосы прокрутки: 200px"?

Я использую jQuery, также приемлемо (более) динамическое решение с использованием jQuery (но я бы предпочел не использовать реализации полосы прокрутки jQuery, если возможно, я хочупридерживаться собственных полос прокрутки).

Кроме того, я бы предпочел не зависеть от функций CSS3.

Ответы [ 2 ]

1 голос
/ 02 декабря 2010

Чтобы ответить на мой собственный вопрос (но все еще ищу альтернативы), вычисление разницы с использованием «детектора» шириной 100% и затем изменение размера помогает мне.Как я уже сказал, использование Javascript для исправления этого не является проблемой в моем случае, но, вероятно, это не то, как вы хотите стилизовать свой собственный сайт:) 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
        #outer {
                display: inline-block;
                width: 200px;
                height: 100px;
                overflow: auto;
        }
        .detector {
               width: 100%;
               height: 0px;
        }
        .entry {
                display: inline-block;
                width: 200px;
        }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
               var outer = $("#outer");
               var detector = $("#outer .detector");
               var scrollsize = 200 - detector.width();
               outer.width(200 + scrollsize);
            });
        </script>
</head>
<body>
<div id="outer">
   <div class="detector">
   </div>
   <div class="entry">
   I'm a short entry
   </div>
   <div class="entry">
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   </div>
   <div class="entry">
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   </div>
</div>
</body>
</html>

Это вычислит разницу между доступным пространством (который будет 200) и используемое пространство "детектором" (который, например, 185px).Это означает, что размер полосы прокрутки составляет 15 пикселей.Увеличение ширины #outer на 15px даст нам область шириной 200px (и уберет горизонтальную полосу прокрутки)

0 голосов
/ 31 декабря 2010

Рассмотрим использование overflow-x: hidden

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...