Как убрать полосы прокрутки?
Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.
Решение
Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!
Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.
Пример 1. Страница без полос прокрутки
HTML5 CSS2.1 IE Cr Op Sa Fx
Полосы прокрутки html < overflow: hidden; >div Бла-бла В данном примере используется значение hidden , которое «обрезает» весь контент выходящий за рамки элемента.
Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.
Пример 2. Нет горизонтальной полосы прокрутки
HTML5 CSS3 IE Cr Op Sa Fx
Полосы прокрутки Бла-бла Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.
Как отключить полосу прокрутки для навигационной панели в HTML/CSS?
Есть шаблон страницы, содержащей навигационную панель и контент отдельными блоками. При переполнении страницы в content появляется полоса прокрутки, которая задевает navbar. Сама полоса прокрутки нужна, но только внутри content, можно ли отображать ее после навигационной панели?
Отслеживать
задан 3 апр в 8:04
359 4 4 серебряных знака 12 12 бронзовых знаков
Добавьте стили и сделайте воспроизводимый пример
3 апр в 8:47
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
.navbar < background: teal; overflow: hidden; /*обрезам все что выходит за рамки нашего блока*/ width: 100%; height: 50px; >.content < background: #555555; height: 100px; overflow: auto; /*если контет будет выпирать из блока то будет появлтся скрол*/ >.content > div
Панель управлению копаблем а тут много мусораааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа a все тут конец Отслеживать
ответ дан 3 апр в 20:24
1 1 1 бронзовый знак
Судя из вопроса, человеку нужен скролл (вертикальный) лишь в блоке с контентом . А не для всего body , который будет и справа от навигации.
Изменить полосу прокрутки на чистом css в Mozilla Firefox
Господа, уверен, многие знают, что есть такая возможность, изменить на чистом css полосу прокрутки. Пример ниже. Но это можно только в chrome и opera. Есть еще возможность для IE пример тут. А кто знает, как обстоят дела с Mozilla Firefox, есть ли такая возможность реализовать такое на чистом css?
::-webkit-scrollbar-button < width: 5px; height: 0px >::-webkit-scrollbar-track < background-color: #ecede; >::-webkit-scrollbar-thumb < border-radius: 0px; background-color: #6dc0c8; >::-webkit-scrollbar-thumb:hover < background-color: #56999f; >::-webkit-resizer < width: 8px; height: 0px; >::-webkit-scrollbar
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Отслеживать
задан 23 сен 2017 в 14:49
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак
На данный момент на чистом css во всех браузерах этого сделать нельзя. Так что надо просто искать плагины jquery.custom-scroll, baron.js и что-то подобное
2 окт 2017 в 10:27
Алексей, но для хрома, opera b IE это реализовано, прекрасно работает, меня интересует просто именно мазила?
2 окт 2017 в 10:38
a на счет плагинов знаю, даже и они мне не нужны, надо будет сам себе напишу на JS. просто хотел узнать о мазиле, может что то изменилось
2 окт 2017 в 10:39
во-первых нет — в EDGE работать не будет сий пример. Во-вторых — мне еще раз написать то, что я написал выше?
2 окт 2017 в 10:39
не стоит повторяться, я понял.
2 окт 2017 в 10:43
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Нашел такое решение
У FF есть такие свойства
По сравнению с хромовским движком конечно же все скудно и скромно.
Но если отталкиваться от FF , можно реализовать скудные возможности FF , а потом подогнать дизайн полосы прокрутки для хромовских движков, так как там возможностей побольше.
div < padding: 15px; >::-webkit-scrollbar-track < background-color: brown; >::-webkit-scrollbar-thumb < background-color: orange; >::-webkit-scrollbar < width: 8px; >* < padding: 0; margin: 0; box-sizing: border-box; >html, body
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil nobis quaerat accusantium, error, quisquam sed vero optio natus, totam dolor quia repellat? Eveniet corrupti vitae velit illum asperiores repellat, perferendis numquam cum fugit, cumque ipsam, error tempora ullam laborum maiores repellendus a! Qui totam inventore voluptas, quaerat expedita provident in officiis odit ad reprehenderit ut illo quia esse ipsum cum dolorum, debitis distinctio? Reiciendis enim reprehenderit sapiente at odio alias. Harum dolores saepe, a accusantium, quidem adipisci corporis facilis provident quibusdam culpa error ratione deleniti ipsa repellat atque aperiam velit voluptatem itaque tenetur quis odit exercitationem neque! Dicta labore, cupiditate totam corrupti, repudiandae, officiis recusandae enim error quaerat maxime doloribus placeat quod deleniti veniam impedit optio ratione quas exercitationem veritatis consequatur? Voluptates labore totam quae obcaecati aliquam praesentium eveniet cupiditate suscipit nesciunt reiciendis minus quia nihil id perferendis, veniam itaque libero corrupti a quam fugiat eum officia magnam? Assumenda, alias laborum reprehenderit velit eaque, placeat repellendus cupiditate esse obcaecati dicta, fugiat quisquam ipsa voluptas debitis! Quia, et? Eaque id assumenda dolorem saepe expedita eos quisquam itaque autem voluptate, aperiam possimus, est nulla dolorum ullam dicta, facilis nam nemo iste repellendus pariatur debitis beatae blanditiis porro consequuntur? Ratione reiciendis modi impedit rerum doloremque, optio asperiores, praesentium labore natus maiores nemo quis quia itaque dignissimos ut perspiciatis corporis commodi dolor provident aperiam, voluptates possimus sit. Consequatur labore perspiciatis quae saepe quisquam reprehenderit nobis eligendi, corporis, necessitatibus aut, in pariatur? Debitis sed fugiat, ab dolorum eveniet, praesentium quas est sapiente distinctio libero voluptate reprehenderit facere, magni in. Voluptas, harum optio! Et aspernatur assumenda non reprehenderit porro inventore cupiditate doloremque veritatis, laborum repudiandae necessitatibus sequi labore accusamus provident nisi illo distinctio sapiente sit, nesciunt dolores officia quam doloribus fuga dolore! Quos, pariatur ipsa. Fugit quam soluta quidem voluptatibus accusantium commodi aliquid assumenda laboriosam, adipisci ullam iste ea eos veniam laborum minima pariatur iusto, natus itaque totam unde cumque doloribus. Esse soluta deleniti culpa minima sunt molestiae accusamus dolore labore doloremque delectus, ad explicabo dolorem eum? Iste maxime et at, debitis ab incidunt, magni pariatur libero fugiat voluptas magnam nesciunt, eaque ipsa culpa quis. Quidem dolor natus sint itaque alias sapiente impedit libero! Eligendi exercitationem, dolorem, soluta nam ab perferendis iure magnam neque quisquam earum iusto dolore, inventore tenetur hic tempora! Harum debitis fuga asperiores corporis esse sapiente iste atque! Deserunt quas quis nostrum ipsa incidunt blanditiis placeat labore facere facilis. Veritatis rem earum dolorem quibusdam dolores officiis cumque minus distinctio doloremque quidem, atque doloribus illum! Alias placeat voluptatibus odit praesentium dolores cum perspiciatis cumque animi necessitatibus natus tempora nesciunt, qui numquam vero ullam id magnam sapiente esse molestiae optio dolorum, nemo non. Officia qui, cum eveniet veritatis molestias dolor laborum omnis vel. Obcaecati quam corrupti sequi numquam tenetur eius adipisci et nihil accusamus natus quidem sint eum quo magni, dolorum ex, hic veniam! Iusto omnis accusamus sapiente saepe error, amet molestias explicabo. Eaque libero provident iusto sunt modi quibusdam dicta nostrum asperiores beatae sint nemo qui laborum cupiditate, tenetur debitis? Ex tenetur in, reprehenderit doloremque exercitationem non officia numquam assumenda quo quam culpa expedita optio! Nulla cupiditate saepe illum consequuntur vel animi fugiat non, suscipit dicta neque, eveniet temporibus. Perferendis accusantium soluta modi, blanditiis fuga enim. Repellat obcaecati sequi debitis dicta odio iusto architecto esse laboriosam nihil accusantium dolores nam ut ex numquam, vitae nemo facere eius nesciunt blanditiis maiores corrupti earum animi error natus. Quas mollitia blanditiis ea impedit autem dolore aliquam ipsum odio natus hic voluptate placeat neque obcaecati aspernatur, officia voluptas! Rem laborum, amet beatae ea, culpa dicta soluta laboriosam porro aliquid omnis ducimus, vitae fugit unde sit adipisci iusto molestiae necessitatibus dolorem atque cumque est distinctio! Culpa dignissimos consequuntur molestiae voluptates in illum quasi ducimus nisi eius sunt iusto incidunt voluptatem dolorum, commodi temporibus sequi placeat eos ipsa architecto ad officiis fuga odio! Laborum debitis, quibusdam mollitia quod nemo tempora expedita fugiat magnam totam! Impedit laborum sed corrupti ullam animi labore inventore aliquid, cupiditate deleniti autem harum suscipit, modi saepe quia asperiores atque iure! Illum eum quibusdam totam, voluptatum rerum at placeat soluta consequatur veniam magni, accusantium minima distinctio. Quos molestias at maiores consequuntur maxime laudantium, temporibus laborum dolorem aperiam modi minima ipsam earum, aliquid neque, placeat aspernatur. Expedita, iste minima? Est, voluptatibus, praesentium ut reprehenderit id amet ducimus, eius repellat reiciendis nihil eaque quos illum voluptate recusandae iste. Non, cum ullam enim quod laboriosam atque dolorum perspiciatis consequuntur quis eius nemo nam odio saepe qui obcaecati similique. Iure dolore enim, voluptatibus beatae veniam corrupti quaerat facilis culpa mollitia autem. Beatae repellendus, consectetur laborum nostrum sapiente, ex cumque dolorem nobis odio dolore architecto, aperiam ad ipsa excepturi voluptas eaque enim tenetur? Voluptatem, quos. Perspiciatis ad, repudiandae ipsam magnam ullam ut officiis repellendus distinctio porro, vero nam. Atque iste exercitationem blanditiis est labore praesentium alias voluptatem itaque modi deleniti, ratione nam recusandae minima vitae nulla! Sequi voluptas, est perferendis, quas nisi ipsa necessitatibus similique sapiente, at provident recusandae. Omnis illum inventore sapiente voluptatem repellendus vel quidem iusto incidunt facilis quo totam nostrum tempore voluptates, impedit similique ipsam, nesciunt dolor, possimus blanditiis quas reiciendis. Maiores provident assumenda animi placeat, possimus consequatur aut ut porro quibusdam. Magni molestiae nesciunt dolores, voluptate odio et! Facilis exercitationem pariatur nam harum dolorum architecto quidem dolores perferendis, iure quis a! Natus molestias odio explicabo quaerat quas perferendis, ipsum suscipit ratione vel minus ea nesciunt culpa possimus neque totam ab vitae similique reiciendis obcaecati reprehenderit numquam aspernatur optio eos consectetur? Nihil dolorum hic quia quod. Debitis, expedita natus similique quasi facilis pariatur excepturi ad distinctio accusamus. Recusandae dicta atque necessitatibus adipisci fugit natus perferendis labore aliquam, impedit magni voluptates quos id sed commodi sapiente saepe molestias beatae ducimus asperiores repudiandae autem ipsa excepturi nihil. Quaerat ipsum fugiat mollitia perferendis hic excepturi, eveniet, sapiente aperiam, incidunt quo magnam ea repellendus molestias quia est vitae iste beatae! Perspiciatis non sed, odit commodi dolorem doloremque quis ad necessitatibus veritatis voluptatem, aperiam maxime praesentium voluptatum accusamus placeat? Quam et corporis excepturi fugiat impedit provident. Veritatis voluptatem aut ipsum, beatae rerum, quis necessitatibus, molestiae illo deleniti aliquid quod tempore soluta! Nesciunt sequi pariatur assumenda quibusdam maxime, et porro tempora voluptates consectetur eius suscipit quis officia delectus ipsum explicabo perspiciatis similique repudiandae quos temporibus, totam, veritatis voluptatibus nostrum facilis. Doloremque officia magni quis ad accusantium eos repellat architecto autem nam optio officiis quaerat hic deserunt eius quae consectetur maiores, vero sint reprehenderit eveniet non? Officiis debitis, numquam at nobis dicta aliquam quisquam quia totam natus vero inventore laudantium cumque eveniet alias expedita mollitia. Omnis non vero nobis dolorem! Fugiat assumenda dicta blanditiis doloribus accusantium cum illum numquam adipisci, modi est incidunt. Velit, voluptatibus assumenda ea ratione qui unde debitis adipisci consequatur aut excepturi exercitationem facere quis quam distinctio dolorem voluptatem temporibus accusantium in. Id, asperiores amet. Ex ipsam doloribus odit aperiam, quia aliquid quasi, eos asperiores vel officiis, dignissimos dolorem odio ratione cum velit neque distinctio deleniti at molestiae aut! Magnam earum assumenda corrupti Как убрать полосу прокрутки css
У нас есть вертикальная и горизонтальная полосы прокрутки. Можно убрать их как по отдельности, так и сразу. Ниже свойства который нужно добавить блоку в том или ином случае.
overflow: hidden; overflow-y: hidden; /*для вертикального*/ overflow-x: hidden; /*для горизонтального*/