Как мы можем спрятать полосу прокрутки div?

Мне интересно, как мы можем скрыть полосу прокрутки элемента div?Как мы можем спрятать полосу прокрутки div?

Использование кода в примере, приведенном ниже, центральный ДИВ имеет вертикальную полосу прокрутки, когда мы напишем много текста в него:

<html> 
<body style="height:100%; width:100%"> 
    <div id="header" style="position:absolute; background-color: red; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; background-color: silver; top:200px; bottom:200px; left:0px; right:0px; overflow:auto; "> 

    <p>Loremenrfei hwofhwefhewufwehfuwefwe fwefhw fwhe ufhhew fweofwehfo ewhohweweofwefoiweh w we fwe fweufweufhweuwheufwefuwefhwe fuhewfuiew fuwefwe wuiewuiwehufwefiuwehfi ewfw ew ifhweuifwei uwuweufheuiwhfiu fhwef hwf wwe wehfwewfweffwehfewh we fiwei fugha fuha FUHA fuHa Hafu fuh</p> 

     <ul> 
      <li>Traalalsalsasakskjasaslka asajsa sajsa jsasja</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>-</li> 
      <li>END</li> 
     </ul> 

    </div> 
    <div id="footer" style="position:absolute; background-color: green; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div> 
    </body> 
</html>

Мой вопрос так, как мы можем скрыть вертикальной полосы прокрутки центральный деб, но продолжать ловко ..?

источник

2013-11-19 Antiprozak

что вы подразумеваете под 'keep scrooling ..?'? –

Привет, Tushar Gupta, я имею в виду, что, например, если я меняю переполнение: auto; к переполнению: скрытый; полоса прокрутки больше не видна, но затем div больше не прокручивается! Итак, как мы можем продолжать прокручивать этот div? – Antiprozak

Попробуйте установить 'width' в 2-й div и удалите' overflow: auto; ' –

Если я вас правильно понимаю, вам нужно добавить position: absolute в верхний и нижний колонтитул и разместить содержимое под ними с помощью index:-10. Смотрите эту demo

UPDATE: добавления соответствующего кода для ссылки (удален все встроенный стиль, как его не встраивать с передовой практикой)

.body { 
    width: 100%; 
    height: 100%; 
} 
#footer, #header, #content { 
    display:block; 
    position: fixed; 
    height: 100px; 
    left: 0; 
    width: 100%; 
} 
#footer { 
    bottom: 0; 
    color: white; 
    background-color: black; 
} 
#header { 
    color: white; 
    top: 0; 
    background-color: black; 
} 
#content { 
    top: 100px; 
    height: 300px; 
    position: absolute; 
    background-color: white; 
    z-index: -10; 
}

источник

2013-11-19 02:08:25 ochi

Большое спасибо blurfus! – Antiprozak

Если бы я получил ваше право точки, вы хотите ДИВУ не иметь полосу прокрутки, но еще прокрутите колесико мыши или PgDn/PgUp и т. д.. Правильно?

У меня нет кода прямо сейчас (вы можете назвать меня плохим ответчиком для этого, однако уже поздно, и если вы этого хотите, я могу отредактировать этот ответ через день или два, чтобы дать вам правильный код), но идея заключается в следующем:

Добавить обработчики событий JavaScript для колеса мыши и нажатия клавиши (mousewheel DOMMouseScroll и keydown);
Используйте объект события события колеса мыши delta для получения направления прокрутки и прокрутки div вверх (отрицательный) или вниз (положительный);
Захватите коды клавиш для стрелки вниз, стрелки вверх, PgDn, PgUp и пробел (я могу хотя бы сказать вам пробел 32) и заставить их прокручивать div вверх или вниз по индексу.

Полезные ссылки: window.scrollTo(), HTML5 and JavaScript mouse wheel, JavaScript key codes

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

Пожалуйста, несите код, если вам все еще нужны некоторые примеры, я отредактирую это завтра вечером. Удачи!

источник

2013-11-19 02:33:24 gchiconi

Как мы можем спрятать полосу прокрутки div?

ответ

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