Удаление полосы прокрутки, но не прокрутки

Я знаю, что вы можете определить переполнение: hidden; на теле HTML, чтобы удалить полосу прокрутки, но я бы все еще мог прокручивать со стрелками или колесом прокрутки мыши.

Заранее благодарим за помощь.

Изменить: Благодарим за советы, касающиеся полос прокрутки и настраиваемых баров. Также благодарим вас за все опасения по поводу воздействия на пользователей, удалив полосы прокрутки. Я уточню немного больше, чтобы вы объяснили, откуда я.

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

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

Ответ 1

Существует библиотека для jQuery с именем jscrollpane http://jscrollpane.kelvinluck.com/#examples, которая может очень сильно измениться.

Но если вы хотите скрыть панель, вы также можете вывести эту полосу прокрутки из вида: http://jsfiddle.net/H27BK/

<div id="content">
    <div id="scrollable"> ... ... ... </div>
</div>

с CSS

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 218px; /* #content.width + 18px */
   overflow-y: scroll;    
}

Все это основывается на ширине полосы 18 пикселей.

Итак, мы можем сделать некоторое определение ширины полосы прокрутки javascript script или просто добавить еще один div, который мы ставим перед прокручиваемым div.

http://jsfiddle.net/uNzEz/

HTML теперь:

<div id="content">
<div id="scrollable">
<div id="txt"> ... ... ...
</div></div></div>

с CSS как:

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 240px; /* the bar-width can be theoretical 240px - 200px = 40px */
   overflow-y: scroll;    
}
#txt {
    width: 200px;
}

Ответ 2

Хорошо, новый ответ. Я просто разработал небольшой трюк, чтобы сделать это, смешанный с jQuery.

Создайте обертку div внутри тела со следующим css.

body { overflow: hidden; }

#wrapper { overflow: auto; }

Затем просто установите их соответствующие высоты:

$("body").height($(window).height());
$("#wrapper").height($("#text").height());

Демо

Для поддержки изменений размера

$(window).trigger('scroll');

$(window).scroll(function() {
    $("body").height($(window).height());
    $("#wrapper").height($("#text").height());    
});

Демо

Ответ 3

Вы можете попробовать использовать один из плагинов прокрутки jQuery, они позволяют настраивать дизайн css...

Вы можете просто выбрать, чтобы ваша полоса прокрутки была невидимой, но функциональность мыши останется...

мой личный фаворит malihu, просто убедитесь, что он использует расширение mousewheel.

EDIT:

Возможно, после того, как вы посмотрите, как выглядят настраиваемые полосы прокрутки, вы можете переосмыслить показ полос прокрутки. они, в конце концов, полезны и поучительны.