Как сделать невидимый скролл без Javascript

Недавно возникла необходимость добавить на сайт div-блок, в котором будет содержаться до 100 сообщений пользователей. Чтобы все это выглядело аккуратно, было решено прибегнуть к скроллу. Но вот незадача — этого показалось мало, и я стал ломать голову над тем, как сделать используемый скролл невидимым, чтобы контент в блоке прокручивался при наведении колесиком мыши. В сети предлагалась масса способов, довольно трудоемких, требующих установки специальных скриптов. Однако я нашел простейший, но не менее действенный вариант. Спешу поделиться с вами.Итак, для начала приведу код простейшего скролла. Здесь используется всего один небольшой скрипт. При этом не нужно ничего никуда грузить — достаточно прописать данный код после вашего контента. Почему после? Это предотвратит конфликт скриптов, если таковые имеются в выводимом контенте.

<div class="width:101%;padding-right:10px;height:400px;overflow:auto;">      
*наш контент*
<script type="text/javascript"> 
$(function() { $('.scroll-pane').jScrollPane();});  </script>  
</div>

У нас получилась область 400 пикселов в высоту и 101% в ширину (здесь можно задать также фиксированный размер). Скролл стандартный.

Теперь сделаем его невидимым. Для этого указанный выше код оборачиваем дивом с overflow:hidden. При этом внешний блок меньше внутреннего.

У нас получается вот что:

<div style="overflow:hidden;"> 
<div class="width:101%;padding-right:10px;height:400px;overflow:auto;">      
*наш контент*
<script type="text/javascript"> 
$(function() { $('.scroll-pane').jScrollPane();});  </script>  
</div>
</div>

В результате — скролла не видно.