Скрыть полосу прокрутки в динамической области

Я пытаюсь скрыть полосу прокрутки в элементе с динамическим размером в CSS и позволить содержимому занимать пространство, в котором была полоса прокрутки. Мне удалось скрыть панель, добавив лишнее дополнение справа от моего элемента, который выталкивает его из div overflow: hidden, однако содержимое не расширяется, чтобы заполнить пробел, занимаемый полосой прокрутки.Скрыть полосу прокрутки в динамической области

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

JSFiddle example, ракомментации, чтобы скрыть полосу прокрутки.

С скроллингом:

Без скроллинга:

источник

2016-02-27 user2248702

Значит, вам не нужна полоса прокрутки? –

@SamirChahine Нет, я хотел бы иметь возможность прокручивать с помощью мыши/javascript, но я не хочу видимый бар. – user2248702

если вы хотите прокручивать DIV, но не полос прокрутки, поместите его в родительских делах. установите родительский div для переполнения скрытым, а внутренний div переполнен автоматически. Сделайте родительский div немного более тонким, чем внутренний div, чтобы полоса прокрутки из внутреннего div не отображалась. если он создан динамически, просто установите ширину во время рендеринга с помощью jQuery или других js.

.parentDiv 
    { 
     width: 301px; 
     height: 450px; 
     overflow: hidden; 
    } 

.parentDiv .innerDiv 
    { 
     width: 320px; 
     height: 450px; 
     overflow: auto; 
    }

ps: - Я просто положил это вместе, чтобы показать эффект. Обратите внимание, что он устанавливает ширину в css для обоих div. Эффект как таковой не требует JS или JQuery, однако установка правил стиля будет динамически. Или используйте php и загрузите ширину на странице load/render. Вы можете инвестировать «calc» для css, но я не знаю, насколько хорошо это поддерживается в разных браузерах. Альтернативно - используйте проценты для css, просто сделайте родительский div скиннером, чем nner div.

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<title>Scrollable Div Test</title> 
<meta charset="UTF-8" /> 
    <style> 
    .parentDiv 
    {; 
     width: 301px; 
     height: 450px; 
     overflow: hidden; 
    } 

.parentDiv .innerDiv 
    { 
     width: 320px; 
     height: 450px; 
     overflow: auto; 
    } 

    </style> 
</head> 

<body> 

<div class="parentDiv"/> 
    <div class="innerDiv"/> 
     <ul> 
      <li>a</li> 
      <li>b</li> 
      <li>c</li> 
      <li>d</li> 
      <li>e</li> 
      <li>f</li> 
      <li>g</li> 
      <li>h</li> 
      <li>i</li> 
      <li>j</li> 
      <li>k</li> 
      <li>l</li> 
      <li>m</li> 
      <li>n</li> 
      <li>o</li> 
      <li>p</li> 
      <li>q</li> 
      <li>r</li> 
      <li>s</li> 
      <li>t</li> 
      <li>u</li> 
      <li>v</li> 
      <li>w</li> 
      <li>x</li> 
      <li>y</li> 
      <li>z</li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

источник

2016-02-27 01:14:45 gavgrif

Я удалил свой ответ, это правильно, +1 –

Я бы предпочел не использовать js, если это возможно. – user2248702

Я не против использования calc, поскольку я ориентируюсь на современные браузеры и использую его в других местах. – user2248702

Set overflow: hidden; на #scroll, но только если вы не хотите какой-либо прокруткой в нем

#scroll { 
    width: 100%; 
    height: 100%; 
    overflow-y: hidden; /*this is the part of the code which make the scroll bar visable*/ 
    background-color: aqua; 
    /*padding-right: 32px; /* uncomment to remove scrollbar by pushing 32 px right*/ 
}

Я не знаю, есть ли способ сделать это без JS, но вот моя мысль до сих пор
использование JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script> 
<script type="text/javascript"> 
$(function() { 

    $("#scroll").mousewheel(function(event, delta) { 

     this.scrollLeft -= (delta * 30); 

     event.preventDefault(); 

    }); 

}); 
</script>

обратите внимание, что вам нужно JQuery и плагин для JQuery называется (JQuery-MouseWheel) https://github.com/jquery/jquery-mousewheel
или вы можете попробовать это один из, это еще один JS, но это один чистый JS https://github.com/kamlekar/slim-scroll

источник

2016-02-27 02:17:18 hamada147

Скрыть полосу прокрутки в динамической области

ответ

Смежные вопросы