Скрыть/удалить полосу прокрутки из ‹тела›, но разрешить прокрутку

Согласно заголовку, есть ли способ скрыть/удалить полосу прокрутки из body (не div, а всего тела) и оставить включенным «свойство прокрутки»? В эти дни я пробовал разные решения, но ничего не получалось.

Заранее спасибо!


javascript html jquery css document-body
person GiS91    schedule 10.10.2016    source источник
comment
проверьте это здесь stackoverflow.com/ вопросы/2469529/   -  person Vishal Solanki    schedule 10.10.2016
comment
вам нужно скрыть прокрутку как вертикальную или горизонтальную   -  person Anubhav pun    schedule 10.10.2016
comment
blogs.msdn.microsoft.com/kurlak/2013/11/03/   -  person roberrrt-s    schedule 10.10.2016
comment
потому что да, зачем соблюдать условности, которые знает и на которые опирается весь мир, если можно просто нарушить их и всех запутать... /rant   -  person Peter B    schedule 10.10.2016
comment
@Roberrrt Я пробовал это решение в последние дни, но оно не работает (по крайней мере, на теле).   -  person GiS91    schedule 10.10.2016

Ответы (6)


arrow_upward
5
arrow_downward

-webkit- решение от Fabian Schultz отлично сработало, я добавил: -ms-overflow-style:none;, чтобы скрыть полосу прокрутки в IE. Прокрутка включена, полоса прокрутки скрыта.

Это полный CSS:

::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-button {
  display: none;
}

body {
  -ms-overflow-style:none;
}
person wuzla    schedule 05.03.2017

arrow_upward
0
arrow_downward

Если вы оберните содержимое, которое вы не хотите прокручивать, в <div class='hidden-scrollbar'>, и, например, прокручиваемый контент будет в чем-то вроде <div class='inner'>, что-то вроде:

<div class='hidden-scrollbar'>
    <div class='inner'>
        Lorem ipsum dolor sit amet...
    </div>
</div>

вы можете применить следующие стили, чтобы удалить вертикальную полосу прокрутки:

body {
    padding:50px;   
}

.hidden-scrollbar {
    background-color:black;
    border:2px solid #666;
    color:white;  
    overflow:hidden;
    text-align:justify;    
}

.hidden-scrollbar .inner {
    height:200px;
    overflow:auto;
    margin:15px -300px 15px 15px;
    padding-right:300px;
}

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

person autoboxer    schedule 10.10.2016

arrow_upward
0
arrow_downward

Скрытие полосы прокрутки и сохранение функциональности кажется сложной задачей для элемента body. Но это может быть достаточно хорошим решением для вас:

CSS:

body{overflow:hidden;} 
body:hover {overflow:auto;}
person Zorken17    schedule 10.10.2016

arrow_upward
0
arrow_downward

В браузерах webkit вы можете использовать стиль полосы прокрутки, чтобы «скрыть» ее:

::-webkit-scrollbar {
  display: none;
}
::-webkit-scrollbar-button {
  display: none;
}

Пример здесь.

К сожалению, этот не работает в IE, Edge и Firefox.

person Fabian Schultz    schedule 10.10.2016
comment
Ваш код без проблем работает в браузерах webkit. Спасибо! Два вопроса: 1) Знаете ли вы какие-нибудь хаки для Firefox и IE/Edge? 2) Как я могу добиться этого динамически с помощью jQuery (например: скрыть/удалить полосу прокрутки и по-прежнему иметь возможность прокручивать после нажатия кнопки)? - person GiS91; 10.10.2016
comment
1) Взгляните на github.com/noraesae/perfect-scrollbar 2) Я обновил свой пример, чтобы иметь кнопку переключения для этого правила CSS, но она не работает мгновенно. Вам нужно подождать секунду после отключения полосы прокрутки, чтобы изменение вступило в силу. - person Fabian Schultz; 10.10.2016
comment
«Идеальная полоса прокрутки», похоже, не работает. Что я сделал, так это: 1) Назначение id=container вместе с position:relative и height:100%; к тегу тела; 2) Инициализация плагина, как указано: var container = document.getElementById('container'); Ps.initialize (контейнер); 3) Вызов 'destroy' для уничтожения полосы прокрутки: Ps.destroy(container); К сожалению, ничего не происходит. Вместо этого хорошо работают такие параметры, как 'wheelSpeed'. - person GiS91; 11.10.2016

arrow_upward
-2
arrow_downward

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

<style type="text/css">
    body {
        overflow:hidden;
    }
</style>
person Tümer Koloğlu    schedule 10.10.2016
comment
overflow:hidden удаляет полосу прокрутки, а также возможность прокрутки. Я хочу скрыть/удалить полосу прокрутки, но при этом иметь возможность прокручивать. - person GiS91; 10.10.2016
comment
в ссылке, которую я отправил, люди обсуждают и эту ситуацию. Прочтите другие ответы. Я не проверял их, но похоже, что вам нужно организовать это для каждого браузера. - person Tümer Koloğlu; 10.10.2016

arrow_upward
-2
arrow_downward

Попробуйте это с помощью решения CSS

body{
      overflow : hidden
}

Если то же самое нужно сделать в jQuery

$("body").css("overflow", "hidden");

Это должно работать как шарм.

person Kay Marshal    schedule 10.10.2016
comment
Спасибо, Кей. Да, ваше решение удаляет полосу прокрутки, но вы больше не можете прокручивать. То, что я пытаюсь получить, это удалить полосу прокрутки, но при этом иметь возможность прокручивать. - person GiS91; 10.10.2016
comment
Это не то, о чем просят ОП. переполнение: скрыто; не только скрывает полосу прокрутки, но и предотвращает прокрутку сайта. - person maverick; 10.10.2016