Прокручиваемая, но без полосы прокрутки

Как я могу позволить объекту DOM, например div, прокручиваться с помощью колесика прокрутки мыши или клавиш со стрелками (например, overflow:scroll), но не показывать полосу прокрутки (например, overflow:hidden)?

Ответы

Ответ 1

Вы можете установить привязку прослушивателя событий к scrolldown/scrollup (через событие mousewheel, смотря на event.wheelDelta для расчета размера и directino прокрутки) и вручную позиционируйте абсолютный позиционный div внутри другой фиксированной высоты абсолютно/относительно позиционированного div. Таким образом, при прокрутке вниз вы уменьшаете y-позицию внутреннего div, а при прокрутке вверх вы увеличиваете положение y.

Для клавиш со стрелками просто привяжите аналогичную функцию к проверке события смены клавиш для стрелки вниз/вверх по мере необходимости.

Я сделал jsfiddle, исследуя эту технику здесь: http://jsfiddle.net/wsmithrill/U7ju8/32/

Ответ 2

Если вы хотите вообще пропустить javascript, вы можете попробовать, что я предложил здесь.

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

Ответ 3

если это может понадобиться, чтобы остановить прокрутку вниз, когда вы достигнете вершины:

var top_val = $("#inner").css("top");
if (top_val.indexOf("-") > -1)
{
    $("#inner").css("top", parseInt($("#inner").css("top"), 10) + 5 + "px");  
}