Скриване на лентата за превъртане, но при запазване на възможността за превъртане

Искам да мога да прелиствам цялата страница, но без да се показва лентата за превъртане.

В Google Chrome това е:

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

Но Mozilla Firefox и Internet Explorer изглежда не работят по този начин.

Опитах това и в CSS:

overflow: hidden;

Това скрива лентата за превъртане, но не мога да превъртам повече.

Има ли начин да премахна лентата за превъртане, като същевременно мога да превъртам цялата страница?

Само с CSS или HTML, моля.

Peter Mortensen
Редактиран въпрос Направете ноември 2019 в 11:47
Програмиране
internet-explorer firefox google-chrome html css
Направете май 2013 в 1:11
23 изгледи
Решение

Просто тест, който работи добре.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

[Работещ скрипец][1]

JavaScript:

Тъй като ширината на лентата за превъртане е различна в различните браузъри, по-добре е да се обработва с JavaScript. Ако направите Element.offsetWidth - Element.clientWidth, ще се появи точната ширина на лентата за превъртане.

[JavaScript Working Fiddle][2]

или

Използване на Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

[Работен скрипец][3]

[JavaScript Working Fiddle][4]

Информация:

Въз основа на този отговор създадох simple scroll plugin.

Peter Mortensen
Редактиран отговор Направете ноември 2019 в 11:49
Коментари (23)

Използване:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Това е трик за известно припокриване на лентата за превъртане с припокриващ се div, който няма никакви ленти за превъртане:

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

Това е само за WebKit браузъри... Или можете да използвате специфично за браузъра CSS съдържание (ако има такова в бъдеще). Всеки браузър би могъл да има различно и специфично свойство за съответните ленти.

За Microsoft Edge използвайте: -ms-overflow-style: -ms-autohiding-scrollbar; или -ms-overflow-style: none;, както е по MSDN.

Няма еквивалент за Firefox. Въпреки че има приставка на jQuery за постигане на това, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Peter Mortensen
Редактиран отговор Направете април 2019 в 2:26
Коментари (6)

Добавяне на

    overflow: -moz-scrollbars-none;

работи за мен.

Peter Mortensen
Редактиран отговор Направете април 2019 в 2:26
Коментари (5)