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

Ответ 1

Теория:

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

Практика:

В вашем случае я предлагаю использовать абсолютное позиционирование и отрицательное нижнее значение на #project-content, чтобы оно переполнило его родительский контейнер (#projects) внизу.

Теперь смысл в том, что отрицательное значение? Это должно быть то же значение, что и с прокруткой , но полосы прокрутки никогда не будут одинаковой ширины в соответствии с браузерами. Поэтому я предлагаю дать большее значение: -30px, чтобы быть уверенным, что он скрыт. Вам просто нужно быть осторожным, чтобы у вас не было контента, чтобы закрыть его до дна, которое можно спрятать на броузерах с помощью тонких полос прокрутки.

Это CSS, который вы должны добавить на свой сайт:

#projects{
    position: relative;
}

#project-content{
    position: absolute;
    top: 0;
    left: 20%;
    bottom: -30px;
    /* remove: 
        height: 100%; 
        position: relative; 
        float: left; 
        padding-bottom: -15px
    /*
}

Ответ 2

scollbars занимают около 20 пикселей, поэтому просто прокручивайтесь div 20px выше и на 20px шире, и ваши полосы прокрутки будут скрыты:

#content {
    background-color: red;
    width: 520px;
    height: 520px;
    overflow: auto;
}

Пример

Ответ 3

Это своего рода обман, но вы можете скрыть его за #content следующим образом DEMO

#content {
    background-color: red;
    width: 500px;
    height: 480px;
    overflow: hidden;
}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: scroll;
}

Ответ 4

Если вы знаете все контейнеры, которые можно прокручивать, вы можете скрыть полосу прокрутки с помощью CSS и немного JS. Для браузеров на веб-страницах (сафари, google chrome, opera) это будет только CSS-решение, чтобы установить ширину полосы прокрутки в 0. Для IE, Firefox и других браузеров, не являющихся веб-сайтами, вы должны рассчитать ширину полосы прокрутки, которая будет использоваться как отрицательная маржа, прямо для вас прокручиваемый контент.

Чтобы сделать это, вы должны обернуть свой контент в div с помощью overflow-y:scroll, чтобы всегда показывать вертикальную полосу прокрутки и скрывать эту полосу прокрутки с помощью margin-right:-17px и parent overflow:hidden. Пример здесь. Нет необходимости устанавливать фиксированную ширину или высоту.

Это метод, используемый в jQuery Scrollbar. Скрытие горизонтальной полосы прокрутки более сложное и требует обработки изменений содержимого для пересчета высоты контейнера.

Ответ 5

Я обычно добавляю padding:0 1em 1em 0; к элементу, где он должен быть скрыт, это скрывает обе полосы прокрутки, если у родителя есть переполнение: hidden. настройте padding-bottom или только padding-right, если нужно скрыть только один из них.

1em - средняя ширина полос прокрутки в большинстве браузеров: http://jsfiddle.net/5GCsJ/912/

Ответ 6

Решение для самого содержимого с горизонтальной прокруткой.

Просто увеличьте высоту #main и #content.

#main {
    width: 500px;
    height: 520px;

}

#sub-main {
    overflow: hidden;

}

#content {
    background-color: red;
    width: 500px;
    height: 520px;
    overflow: auto;

}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: hidden;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}

Ответ 7

• Используйте script для создания пользовательских полос прокрутки.

http://manos.malihu.gr/jquery-custom-content-scroller/

• Затем используйте CSS (или измените script или измените script config), чтобы скрыть пользовательские полосы прокрутки.

Ответ 8

Я сделал это грубо, используя jQuery и ваш пример

Отметьте fiddle:

Я просто обнаружил направление колеса прокрутки и нажал полосу прокрутки с помощью jQuery

$(document).ready(function(){
    $('#content').bind('mousewheel', function(e){
        var curScroll = $("#content").scrollLeft();
        if(e.originalEvent.wheelDelta > 0) {            
            $("#content").scrollLeft(curScroll-500);
        } else {
            $("#content").scrollLeft(curScroll+500);
        }
    });
});

Это "грубо", потому что я жестко закодировал некоторые значения, такие как количество 500 пикселей, чтобы прокрутить, вы могли бы написать еще несколько javascript для динамического определения количества прокрутки. Плюс я не знаю, будет ли значение wheelDelta +120 для up и -120 для down, для вас и других пользователей.

Также обратите внимание, что scrolLeft() может быть анимированным.. для более плавных переходов.