Як прибрати смуги прокрутки? Відключити прокрутку сторінки css

завдання

Прибрати горизонтальні або вертикальні смуги прокрутки зі сторінки, не залежно від обсягу сторінки.

Рішення

Перед тим як прибрати смуги прокрутки з веб-сторінки, подумайте, чи дійсно вам це так необхідно. Відсутність можливості прокрутки вмісту документа створює труднощі відвідувачам сайту для перегляду інформації. Якщо ж існує гостра необхідність побудови дизайнерських вишукувань або бажання створити своїм читачам труднощі, то вперед. Але вас попереджали!

Спосіб заснований на використанні властивості overflow, яке додається до селектора HTML, як показано в прикладі 1.

Приклад 1. Сторінка без смуг прокрутки

HTML5 CSS2.1 IE Cr Op Sa Fx

смуги прокрутки

Бла бла

В даному прикладівикористовується значення hidden, яке «обрізає» весь контент виходить за рамки елемента.

Також можна використовувати властивість overflow-x, щоб приховати тільки горизонтальну смугу прокрутки і overflow-y - для приховування вертикальної смуги. У прикладі 2 показано додавання шару з мінімальною шириною 800 пікселів. При зменшенні вікна браузера до цієї величини, шар перестає змінювати свої розміри і з'являється горизонтальна смуга прокрутки. За допомогою властивості overflow-x смуги прокрутки ховаються.

Приклад 2. Ні горизонтальної смуги прокрутки

HTML5 CSS3 IE Cr Op Sa Fx

смуги прокрутки

Бла бла

Властивості overflow-x і overflow-y входять в специфікацію CSS3 і не проходять валідацію при перевірці стилів на CSS2.1.

Як вимкнути прокрутку?

Відповідь майстра:

Прокрутка потрібна тоді, коли необхідно пересуватися по документу або веб-сайту, а їх розмір не обмежує розмір екрану. Виділяють вертикальну і горизонтальну прокрутку. У разі відключення прокрутки повноцінне проглядання ресурсів стане неможливим.

Прокрутка є налаштованим параметром. Основні настройки можна задати за допомогою «Миші», при цьому вони будуть діяти для всіх додатків, а спосіб прокрутки задається і скасовується за допомогою браузера. Ці налаштування будуть працювати під час роботи в мережі інтернет.

Для відключення плавної прокрутки під час перегляду інтернет-ресурсів, запустимо браузер і виберемо в меню «Інструменти» розділ «Налаштування». для Internet Explorerце буде меню «Сервис» і розділ «Властивості оглядача». У разі, якщо меню не відображається, кликнемо по верхній або нижній панелі вікна браузера і відзначимо маркером в меню підпункт «Панель меню», або «Рядок меню».

Після відкриття вікна «Налаштування» перейдемо до вкладки «Додаткові» і зробимо активним підрозділ «Загальні». Знайдемо групу «Перегляд сайтів» і знімемо позначку з поля «Використовувати плавну прокрутку», після чого натиснемо кнопку «ОК».

Для того щоб відключити автоматичну прокрутку, знімемо позначку з поля «Використовувати автоматичну прокрутку». Для Internet Explorer спосіб буде дещо відрізнятися - потрібно пересуватися по списку доступних налаштувань, користуючись при цьому смугою прокрутки, поки не будуть знайдені необхідні пункти.

Для того щоб налаштувати Загальні параметрипрокрутки, звернемося до компоненту «Миша», для чого викличемо «Панель управління» (з меню «Пуск»). Зайдемо в категорію «Принтери та інше обладнання» і кликнемо по значку «Миша».

Відкриється вікно «Властивості: Миша», після цього потрібно перейти до вкладки «Колесо» і налаштувати прокрутку відповідно до своїх вимог. Маркер, який встановлений в поле «Екран», буде рухати зображення на моніторі на відстань, рівну висоті екрану.

Якщо для нас цей параметр надто великий, можна встановити маркер в поле «На вказану кількість рядків» і ввести необхідне значення за допомогою клавіатури або кнопок зі стрілками. Значення «0» поставити не можна. Застосуємо здійснені зміни і закриємо вікно.

Це відео про те, як прибрати смугу прокруткипри з перегляді і публікації сайту в програмі Adobe Muse.

Існує 2 способи як це можна зробити:
1. Перший з них - просто прибрати елементи знаходяться за межами області контенту в режимі "Дизайну" сторінки.
2. Другий - за допомогою розміщення спеціального коду html в розділ head сторінки.

Дивіться це відео:

"У цьому відео уроці ми розглянемо як прибрати смугу прокрутки

Як прибрати смугу прокрутки. Опис проблеми.

Давайте відкриємо відразу програму, тут створено новий проект. Тут зробимо 75% масштаб, про всяк випадок. І збільшимо сторінку. Припустимо, у нас є на сторінці кілька об'єктів - раз, два, три. Тут у нас якийсь текст, логотипи, картинки все що завгодно. І випадково ви розмістили об'єкт поза області контенту сторінки.

Коли ви натискаєте значок «виділення», цей об'єкт буде у вас не помітний. Особливе, якщо у вас вимкнена функція «показувати поля фрейма», а в попередніх версіяхце було по-замовчуванню, країв кадру було видно тільки при наведенні мишки на нього. Той об'єкт, який знаходиться за межами сторінки буде взагалі не видно, поки ви не наведете на нього мишкою.

Таким чином, при перегляді сторінки в браузері, у вас з'являється горизонтальна прокрутка, яка всім так заважає на сайті. До того ж, якщо у вас встановлена заливка основного фону сторінки, наприклад зелений колір, то при перегляді і прокручуванні сторінки до кінця, ви побачите, що ваша сторінка має горизонтальну прокрутку, так буде краще видно.

Як прибрати смугу прокрутки. Рішення 1.

Ми йдемо в режим дизайну сторінки, навіть якщо у вас вимкнена функція «країв кадру», можете натиснути клавіші Ctrl + A і таким чином виділіть всі об'єкти у себе на сторінці. Далі зменшуєте масштаб до 50% або затискаєте клавішу Alt, і крутите колесо мишки на себе. Таким чином, ви побачите що у вас є об'єкти за областю контенту сторінки.

Для того, що б прибрати горизонтальну прокрутку, вам потрібно видалити ці непотрібні об'єкти, або перемістити їх в область контенту сторінки.

Натискаємо поєднання клавіш Ctrl +, і бачимо, що у нас за областю контенту сторінки нічого немає.

Йдемо в режим перегляду, і тепер у нас горизонтальна прокрутка в браузері відсутня.

Як прибрати смугу прокрутки. Рішення 2.

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

Необхідно зайти в меню "Сторінка", "", і тут в розділі «Метадані», в блоці HTML для head, вставити певний код, який я вам зараз покажу. Цей код ви можете побачити в описі цього відео, скопіювати його і вставити. Виглядає він ось так.

Виділяємо його (я натискаю поєднання клавіш Ctrl + C), заходжу знову в режим дизайну сторінки, у властивостях сторінки вставляю його ось сюди, і натискаю ОК.

Таким чином, навіть якщо якийсь блок буде розташований поза області контенту сторінки, при перегляді сторінки в браузері, у вас горизонтальна прокрутка також буде відсутній.

Як прибрати смугу прокрутки. висновок

На цьому ми закінчуємо наш урок. На ньому ми дізналися як прибрати смугу прокруткипри перегляді сторінки в браузері в програмі Adobe Muse.

А я не прощаюся з вами, підписуйтесь на мій канал, ставте лайки, пишіть коментарі і дивіться мої попередні і наступні відео уроки. До зустрічі друзі, поки. "

Як прибрати смугу прокрутки.Доповнення до уроку.

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

Видалення горизонтальної прокрутки, без появи додаткової вертикальної:

Видалення будь-прокрутки:

Я використовую плагін scrollTo jQuery і хотів би знати, чи можна якось тимчасово відключити прокрутку елемента вікна через Javascript? Причина, по якій я хотів би відключити прокрутку, полягає в тому, що при прокручуванні під час анімації scrollTo вона стає дійсно потворною;)

звичайно, я міг би зробити $ ( "body"). css ( "overflow", "hidden"); а потім поверніть його в авто, коли анімація зупиниться, але було б краще, якби смуга прокрутки була все ще видно, але неактивна.

30 відповідей

/ ** * $ .disablescroll * Author: Josh Harrison - aloof.co * * Disables scroll events from mousewheels, touchmoves and keypresses. * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride! * /; (Function ($) ( "use strict"; var instance, proto; function UserScrollDisabler ($ container, options) (// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 / / left: 37, up: 38, right: 39, down: 40 this.opts = $ .extend ((handleKeys: true, scrollEventKeys:), options); this. $ container = $ container; this. $ document = $ (document); this.lockToScrollPos =; this.disable ();) proto = UserScrollDisabler.prototype; proto.disable = function () (var t = this; t.lockToScrollPos = [t. $ container.scrollLeft (), t . $ container.scrollTop ()]; t. $ container.on ( "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll", t._handleWheel); t. $ container.on ( "scroll.disablescroll", function () ( t._handleScrollbar.call (t);)); if (t.opts.handleKeys) (t. $ document.on ( "keydown.disablescroll", function (event) (t._handleKeydown.call (t, event); ));)); proto.undo = function () (var t = this; t. $ container.off ( ". disablescroll"); if (t.opts.handleKeys) ( t. $ document.off ( ". disablescroll"); )); proto._handleWheel = function (event) (event.preventDefault ();); proto._handleScrollbar = function () (this. $ container.scrollLeft (this.lockToScrollPos); this. $ container.scrollTop (this.lockToScrollPos);); proto._handleKeydown = function (event) (for (var i = 0; i< this.opts.scrollEventKeys.length; i++) { if (event.keyCode === this.opts.scrollEventKeys[i]) { event.preventDefault(); return; } } }; // Plugin wrapper for object $.fn.disablescroll = function(method) { // If calling for the first time, instantiate the object and save // reference. The plugin can therefore only be instantiated once per // page. You can pass options object in through the method parameter. if(! instance && (typeof method === "object" || ! method)) { instance = new UserScrollDisabler(this, method); } // Instance already created, and a method is being explicitly called, // e.g. .disablescroll("undo"); else if(instance && instance) { instance.call(instance); } }; // Global access window.UserScrollDisabler = UserScrollDisabler; })(jQuery);

з мого спливаючого проекту jQuery: https: //github.com/seahorsepip/jPopup

// Freeze page content scrolling function freeze () (if ($ ( "html"). Css ( "position")! = "Fixed") (var top = $ ( "html"). ScrollTop ()? $ ( " html "). scrollTop (): $ (" body "). scrollTop (); if (window.innerWidth> $ (" html "). width ()) ($ (" html "). css (" overflow-y "," scroll ");) $ (" html "). css ((" width ":" 100% "," height ":" 100% "," position ":" fixed "," top ": -top ));)) // Unfreeze page content scrolling function unfreeze () (if ($ ( "html"). css ( "position") == "fixed") ($ ( "html"). css ( "position" , "static"); $ ( "html, body"). scrollTop (-parseInt ($ ( "html"). css ( "top"))); $ ( "html"). css (( "position": "", "width": "", "height": "", "top": "", "overflow-y": ""));))

цей код бере до уваги проблеми ширини, висоти, смуги прокрутки і pagejump.

можливі проблеми, вирішені вище код:

ширина, при установці фіксованою позиції ширина html-елемента може бути менше 100%
висота, така ж, як вище
scrollbar, при установці позиції фіксованою вміст сторінки більше не має смуги прокрутки, навіть якщо у нього була смуга прокрутки, перш ніж привести до горизонтального pagejump
pagejump, при установці фіксованою позиції сторінка scrollTop більше не ефективна, що призводить до вертикального pagejump

Якщо хтось чи є які-небудь поліпшення в вищевказаному коді заморожування / розморожування сторінки, дайте мені знати, щоб я міг додати ці поліпшення в свій проект.

відключити прокрутки:

$ ( ". Popup"). Live ((popupbeforeposition: function (event, ui) ($ ( "body"). On ( "touchmove", false);)));

після закриття спливаючого вікна прокрутки версії:

$ ( ". Popup"). Live ((popupafterclose: function (event, ui) ($ ( "body"). Unbind ( "touchmove");)));

наступний фрагмент (за допомогою jquery) відключить прокрутку вікна:

Var curScrollTop = $ (window) .scrollTop (); $ ( "Html"). ToggleClass ( "noscroll"). Css ( "top", "-" + curScrollTop + "px");

і в вашому css:

Html.noscroll (position: fixed; width: 100%; top: 0; left: 0; height: 100%; overflow-y: scroll! Important; z-index: 10;)

Тепер, коли ви видаляєте модальний, не забудьте видалити клас noscroll в тезі html:

$ ( "Html"). ToggleClass ( "noscroll");

Document.onwheel = function (e) (// get the target element target = e.target; // the target element might be the children of the scrollable element // eg, "li" s inside an "ul", "p "s inside a" div "etc. // we need to get the parent element and check if it is scrollable // if the parent isn" t scrollable, we move up to the next parent while (target.scrollHeight<= target.clientHeight) { // while looping parents, we"ll eventually reach document.body // since body doesn"t have a parent, we need to exit the while loop if (target == document.body) { break; } target = target.parentElement; } // we want this behaviour on elements other than the body if (target != document.body) { // if the scrollbar is at the top and yet if it still tries to scroll up // we prevent the scrolling if (target.scrollTop <= 0 && e.deltaY < 0) { e.preventDefault(); } // similarly, if the scrollbar is at the bottom and it still tries to scroll down // we prevent it else if (target.clientHeight + target.scrollTop >= Target.scrollHeight && e.deltaY> 0) (e.preventDefault ();))); body (background: gainsboro;) #box (width: 300px; height: 600px; padding: 5px; border: 1px solid silver; margin: 50px auto; background: white; overflow: auto;)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Це найпростіше рішення, яке я отримав до цих пір. І повірте мені, я пробував всі інші, і це найпростіший. Він відмінно працює на пристроях Windows , Який штовхає сторінку справа, щоб мати місце для смуги прокрутки системи і пристрою IOS які не вимагають місця для своїх смуг прокрутки в браузерах. Таким чином, використовуючи це, вам не потрібно додавати заповнення справа, щоб сторінка не мерехтіла, коли ви приховати переповнення тіла або html за допомогою в CSS.

рішення досить просте, якщо ви думаєте про це. Ідея полягає в тому, щоб дати

Я знайшов найкращий, але глючний спосіб, об'єднавши ідею sdleihssirhc:

Window.onscroll = function () (window.scrollTo (window.scrollX, window.scrollY); // Or //window.scroll(window.scrollX, window.scrollY); // Or Fallback //window.scrollX=window .scrollX; //window.scrollY=window.scrollY;);

Я не тестував його, але я відредагую пізніше і дам вам знати. Я на 85% впевнений, що він працює в основних браузерах.

У даній статті ви дізнаєтеся, як відключити або включити автоматичне приховування смуг прокрутки в універсальних додатках (UWP) для вашої облікового записув Windows 10

В операційній системі, починаючи з 1803 розробники додали опцію яка дозволяє відключити автоматичне приховування смуг прокрутки і буде корисна насамперед для користувачів які вважають за краще щоб смуги прокрутки залишалися завжди видимими в додатках UWP (XAML) і в

За замовчуванням операційна системаприховує смуги прокрутки, коли на них не наведений курсор миші. Відключення цього параметра призводить до того, що смуги прокрутки в додатках UWP (XAML) і в меню Пуск будуть відображатися як смуги прокрутки в їх повному розширеному розмірі, навіть якщо ви не взаємодієте з ними.

Як відключити автоматичне приховування смуг прокрутки в додатку « параметри Windows»

Щоб відключити автоматичне приховування смуг прокрутки, натисніть на панелі завдань кнопку Пускта обравши або натисніть + I

У вікні додатка «Параметри Windows» виберіть категорію Спеціальні можливості

Далі виберіть вкладку дисплей, І в правій частині вікна, в розділі Спрощення та персоналізація Windows, Виберіть пункт Вимкнути.

Тепер смуги прокрутки будуть постійно відображатися в універсальних додатках (UWP), а також в меню Пуск, навіть якщо ви не будете взаємодіяти з ними.

Ви можете скасувати зміни, для цього встановіть перемикач Автоматичне приховування смуг прокрутки в Windowsв положення Увімкнути.

Як відключити автоматичне приховування смуг прокрутки в редакторі реєстру

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

Відкрийте редактор реєстру, для цього натисніть клавіші + R і у вікні, введіть regedit і натисніть клавішу Enter↵або скористайтеся пошуком в Windows.

У вікні редактора реєстру перейдіть за наступним шляхом:

HKEY_CURRENT_USER \ Control Panel \ Accessibility

Далі, натисніть правою кнопкоюмиші на розділі Accessibilityабо натисніть правою кнопкою миші на порожній області в правій частині вікна і в контекстному менюОберіть Створити> Параметр DWORD (32 біти). Дайте створеному параметру ім'я DynamicScrollbars

Потім двічі натисніть по створеному параметру DynamicScrollbarsі як його значення встановіть 0 і натисніть кнопку OK

Зміни вступають в силу відразу.

Щоб включити автоматичне приховування смуг прокрутки, в параметрі DynamicScrollbarsвстановіть значення 1
Також, щоб відключити автоматичне приховування смуг прокрутки, ви можете такого змісту: