Вимкнення вертикальних та горизонтальних смуг переглядачів

117

Чи можливо відключити браузери вертикальні та горизонтальні смуги прокрутки за допомогою jQuery або javascript?

javascript jquery

— naveen
джерело

Я думаю , що в деяких ситуаціях , особливо якщо ви хочете , щоб перемикатися між спіраллю і не свиткою цим рішенням є кращим: stackoverflow.com/questions/8701754 / ...

— Юсеф Салімпур

Ви можете знайти більш повну відповідь на це питання тут stackoverflow.com/a/25561646/1922144

— davidcondrey

144

У випадку, якщо вам потрібна можливість ховати та показувати смуги прокрутки динамічно, ви могли б використовувати

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

і

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

десь у вашому коді.

— Олександр Прокоф'єв
джерело

4

Переповнений прихований не завжди працює в IE. Дивіться відповідь AnthonyWJones нижче.

— Тіаго Алмейда

4

oveflow: hiddenне завадить нічого на смартфонах.

— dvlden

У хромі це відключає смугу прокрутки, не приховуючи її (вона все ще є і все ще змінює розмір всього іншого, але тепер її сірого

— кольору

121

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

— Лінчі
джерело

5

Два оновлення надзвичайно мало, оскільки вони є єдиною чистою відповіддю на javascript.

— Fzs2

2

@HermannIngjaldsson: Побачити, що OP запитував рішення JavaScript або jQuery і прийняв рішення jQuery 4 роки тому, це має сенс. Я не кажу, що відповідь не є доброю, просто констатуючи очевидне щодо нижчих голосів. +1 від мене все одно.

— Nope

це єдине рішення, яке працювало для мене, оскільки прихований перелив тіла не атакує весь документ, це правильне рішення цієї проблеми! велике спасибі, ти врятував мені багато часу!

— Adnane.T

Це геніальне рішення і заслуговує на підвищення цінності. Він також вирішує проблему з фіксованим css, де сторінка буде прокручуватися доверху.

— haipham23

50

Спробуйте CSS

<body style="overflow: hidden">

— Рей Лу
джерело

15

Для сумісності браузера я також додав би цей стиль до тегу HTML: html, body {overflow: hidden;}

— Ady

32

Поки у нас переповнення: приховано на тілі. Однак IE не завжди шанує це, і вам потрібно також поставити scroll = "no" на елемент тіла та / або розмістити переповнення: приховано і на html-елементі.

Ви можете зробити це далі, коли вам потрібно "взяти під контроль" порт перегляду, ви можете це зробити: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

Елемент, наділений висотою 100% у тілі, має повну висоту вікна перегляду вікна, а елемент розташований абсолютно за допомогою нижнього: nnPX буде встановлено nn пікселів над нижньою кромкою вікна тощо.

— AnthonyWJones
джерело

2

чи не є "," має бути ";", в css тіла?

— paynestrike

12

Спробуйте CSS.

Якщо ви хочете видалити Горизонтальний

overflow-x: hidden;

І якщо ви хочете видалити вертикальний

overflow-y: hidden;

— шафраз
джерело

10

У сучасних версіях IE (IE10 і вище) прокрутки можна приховати за допомогою -ms-overflow-styleвластивості .

html {
     -ms-overflow-style: none;
}

У Chrome можна прокручувати смуги прокрутки:

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

Це дуже корисно, якщо ви хочете використовувати веб-додаток прокрутки 'за замовчуванням' у веб-додатку, що значно швидше, ніж overflow-y: scroll.

— Lg102
джерело

тільки це спрацювало на мене з усіх відповідей :) дякую!

— Гедімін

9

Якщо вам також потрібна підтримка Internet Explorer 6, просто перелийте html

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

і

$("html").css("overflow", "auto");

— Гавін
джерело

5

У IE є помилка з панелями прокрутки. Тож якщо ви хочете будь-який із двох, ви повинні включити наступне, щоб приховати горизонтальну смугу прокрутки:

overflow-x: hidden;
overflow-y:scroll;

і приховати вертикаль:

overflow-y: hidden;
overflow-x: scroll;

— Зеешан Алі
джерело

4

(Я поки не можу коментувати, але хотів поділитися цим):

Код Лінзі працював на мене в браузері настільних ПК. Однак на iPad (Chrome, iOS 9) програма застосувала. Щоб виправити це, я змінив

document.documentElement.style.overflow = ...

до

document.body.style.overflow = ...

що вирішило мою проблему.

— Еразм Кедерне
джерело

2

Оскільки Firefox має стрілку ключ найкоротших, ви , ймовірно , хочете поставити <div>навколо нього зі стилем CSS: overflow:hidden;.

— Qvcool
джерело

2

За допомогою JQuery ви можете відключити смугу прокрутки з цим кодом:

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

Також ви можете знову включити цей код:

 $('body').unbind('mousewheel');

— gtzinos
джерело