Jak odstraním posuvníky? Zakázat posouvání stránky css

Úkol

Odeberte ze stránky vodorovné nebo svislé posuvníky bez ohledu na velikost stránky.

Rozhodnutí

Než odstraníte posuvníky z webové stránky, zvažte, zda to opravdu potřebujete. Neschopnost procházet obsahem dokumentu znesnadňuje návštěvníkům stránek prohlížení informací. Pokud existuje naléhavá potřeba vytvářet designové potěšení nebo touha dělat potíže čtenářům, pokračujte. Ale byli jste varováni!

Metoda spoléhá na vlastnost přetečení, která je přidána do selektoru HTML, jak je znázorněno v příkladu 1.

Příklad 1. Stránka bez posuvníků

HTML5 CSS2.1 IE Cr Op Sa Fx

Posuvníky

Bla bla

V tomto příkladu se používá hodnota skrytá, která „klipe“ veškerý obsah mimo prvek.

Vlastnost overflow-x můžete také použít ke skrytí pouze vodorovného posuvníku a overflow-y ke skrytí svislého posuvníku. Příklad 2 ukazuje přidání vrstvy s minimální šířkou 800 pixelů. Když se okno prohlížeče sníží na tuto hodnotu, vrstva přestane měnit velikost a zobrazí se vodorovný posuvník. Díky vlastnosti overflow-x jsou posuvníky skryty.

Příklad 2. Žádný vodorovný posuvník

HTML5 CSS3 IE Cr Op Sa Fx

Posuvníky

Bla bla

Vlastnosti overflow-x a overflow-y jsou součástí specifikace CSS3 a nejsou ověřeny při ověřování stylů CSS2.1.

Jak vypnu rolování?

Hlavní odpověď:

Posouvání je užitečné, když se potřebujete pohybovat po dokumentu nebo webu, a jeho velikost neomezuje velikost obrazovky. Přiřaďte svislé a vodorovné posouvání. Pokud je rolování zakázáno, úplné zobrazení zdrojů bude nemožné.

Rolování je konfigurovatelné. Základní nastavení lze nastavit pomocí myši a bude se vztahovat na všechny aplikace a způsob posouvání se nastavuje a ruší pomocí prohlížeče. Tato nastavení budou fungovat při procházení Internetu.

Chcete-li při procházení internetových zdrojů zakázat plynulé posouvání, spusťte prohlížeč a v nabídce „Nástroje“ vyberte sekci „Nastavení“. Pro Internet Explorer to bude nabídka Nástroje a část Možnosti Internetu. Pokud se nabídka nezobrazí, klikněte na horní nebo dolní podokno okna prohlížeče a označte v nabídce značku podpoložkou „Panel nabídek“ nebo „Panel nabídek“.

Po otevření okna „Nastavení“ přejděte na kartu „Upřesnit“ a aktivujte podsekci „Obecné“. Najděte skupinu „Procházet weby“, zrušte zaškrtnutí políčka „Používat plynulé posouvání“ a poté klikněte na tlačítko „OK“.

Chcete-li deaktivovat automatické posouvání, zrušte zaškrtnutí políčka „Použít automatické posouvání“. U aplikace Internet Explorer se metoda bude mírně lišit - musíte procházet seznamem dostupných nastavení pomocí posuvníku, dokud nenajdete potřebné položky.

Pro konfiguraci obecných parametrů posouvání se podívejme na komponentu „Myš“, kterou nazýváme „Ovládací panel“ (z nabídky „Start“). Pojďme do kategorie „Tiskárny a další zařízení“ a klikneme na ikonu „Myš“.

Otevře se okno „Vlastnosti: Myš“, poté musíte přejít na kartu „Kolo“ a upravit posouvání podle svých požadavků. Značka, která je nastavena v poli „Obrazovka“, posune obraz po monitoru ve vzdálenosti rovnající se výšce obrazovky.

Pokud je tento parametr pro nás příliš velký, můžete nastavit značku v poli „Pro zadaný počet řádků“ a zadat požadovanou hodnotu pomocí klávesnice nebo tlačítek se šipkami. Hodnotu „0“ nelze nastavit. Pojďme aplikovat změny a zavřít okno.

Toto video je o jak odstranit posuvník při prohlížení a publikování webu v aplikaci Adobe Muse.

Existují 2 způsoby, jak toho dosáhnout:
1. První je jednoduše odstranit prvky mimo oblast obsahu v režimu „Design“ stránky.
2. Druhým je umístění vlastního html kódu do hlavní části stránky.

Podívej se na tohle video:

"V tomto videonávodu se podíváme." jak odstranit posuvník

Jak odstranit posuvník. Popis problému.

Pojďme program hned otevřít, zde byl vytvořen nový projekt. Pro každý případ jej zde zvětšíme až na 75%. A stránku zvětšíme. Řekněme, že máme na stránce několik objektů - jeden, dva, tři. Zde máme nějaký text, loga, obrázky, cokoli. A náhodou jste umístili objekt mimo oblast obsahu stránky.

Když kliknete na ikonu „výběr“, tento objekt nebude viditelný pro vás. Zvláště pokud jste deaktivovali funkci "zobrazit pole rámečku" a v předchozích verzích to bylo ve výchozím nastavení, okraje rámečku byly viditelné pouze při umístění kurzoru nad něj. Objekt, který je mimo stránku, nebude vůbec viditelný, dokud na něj nepřejedete myší.

Při prohlížení stránky v prohlížeči tedy máte vodorovné posouvání, které je tak rušivé pro všechny na webu. Kromě toho, pokud máte hlavní pozadí stránky nastavené na vyplnění, například zelené, pak při prohlížení a posouvání stránky až na konec uvidíte, že vaše stránka má vodorovné posouvání, takže to bude lépe vidět.

Jak odstranit posuvník. Řešení 1.

Přejdeme do režimu návrhu stránky, i když jste deaktivovali funkci "hrany rámečku", můžete stisknout kombinaci kláves Ctrl + A a vybrat tak všechny objekty na stránce. Dále zmenšete měřítko na 50% nebo podržte klávesu Alt a otočte kolečkem myši směrem k sobě. Tímto způsobem uvidíte, že máte objekty mimo oblast obsahu stránky.

Chcete-li odstranit vodorovné posouvání, musíte odstranit tyto nepotřebné objekty nebo je přesunout do oblasti obsahu stránky.

Stiskněte kombinaci kláves Ctrl + a uvidíme, že za oblastí obsahu stránky nemáme nic.

Přejdeme do režimu zobrazení a nyní v prohlížeči nemáme žádné vodorovné posouvání.

Jak odstranit posuvník. Řešení 2.

Pokud se vám tímto způsobem nepodařilo odstranit vodorovné posouvání, existuje další způsob, jak toto posouvání na stránce jednoduše deaktivovat.

Musíte jít do nabídky „Stránka“, „“ a zde v sekci „Metadata“, do bloku HTML pro hlavu, vložit nějaký kód, který vám nyní ukážu. Tento kód můžete vidět v popisu tohoto videa, zkopírovat a vložit. Vypadá to takhle.

Vyberte jej (stisknu kombinaci kláves Ctrl + C), vraťte se do režimu návrhu stránky, vložte jej sem do vlastností stránky a klikněte na OK.

I když je tedy nějaký blok umístěn mimo oblast obsahu stránky, při prohlížení stránky v prohlížeči nebudete mít žádné vodorovné posouvání.

Jak odstranit posuvník. Závěr

Tím končí naše lekce. Na tom jsme se naučili jak odstranit posuvník při prohlížení stránky v prohlížeči v aplikaci Adobe Muse.

A já se s vámi nerozloučím, přihlaste se k odběru mého kanálu, dávejte lajky, pište komentáře a sledujte moje předchozí a další videonávody. Uvidíme se, přátelé, ahoj. “

Jak odstranit posuvník.Dodatek k lekci.

Pro ty, kteří tento kód nemají a posuvník stále zůstává - zkuste nejprve vymazat mezipaměť prohlížeče. Místo výše uvedených můžete také vyzkoušet tyto kódy:

Odstranění vodorovného posouvání bez dalšího svislého posouvání:

Odebrání libovolného svitku:

Používám plugin scrollTo jQuery a chtěl bych vědět, jestli je možné nějak dočasně deaktivovat posouvání prvku okna přes Javascript? Důvod, proč bych chtěl deaktivovat rolování, je ten, že při rolování během animace scrollTo to bude opravdu ošklivé;)

samozřejmě bych mohl udělat $ ("body"). css ("overflow", "hidden"); a poté, co se animace zastaví, nastavte ji zpět na auto, ale bylo by lepší, kdyby byl posuvník stále viditelný, ale neaktivní.

30 odpovědí

/ ** * $ .disablescroll * Autor: Josh Harrison - aloof.co * * Zakáže události posouvání z koleček myši, dotyků a stisku kláves. * Použijte, když jQuery animuje polohu posouvání pro zaručenou superhladkou jízdu! * /; (function ($) ("use strict"; var instance, proto; function UserScrollDisabler ($ container, options) (// mezerník: 32, pageup: 33, pagedown: 34, end: 35, home: 36 / / left: 37, up: 38, right: 39, down: 40 this.opts \u003d $ .extend ((handleKeys: true, scrollEventKeys :), options); this. $ container \u003d $ container; this. $ document \u003d $ (document); this.lockToScrollPos \u003d; this.disable ();) proto \u003d UserScrollDisabler.prototype; proto.disable \u003d function () (var t \u003d this; t.lockToScrollPos \u003d [t. $ container.scrollLeft (), t . $ container.scrollTop ()]; t. $ container.on ("mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll", t._handleWheel); t. $ container.on ("scroll.disablescroll", funkce () ( t._handleScrollbar.call (t);)); if (t.opts.handleKeys) (t. $ document.on ("keydown.disablescroll", function (event) (t._handleKeydown.call (t, event); ));)); proto.undo \u003d function () (var t \u003d this; t. $ container.off (". disablescroll"); if (t.opts.handleKeys) ( t. $ document.off (". disablescroll"); )); proto._handleWheel \u003d function (event) (event.preventDefault ();); proto._handleScrollbar \u003d function () (this. $ container.scrollLeft (this.lockToScrollPos); this. $ container.scrollTop (this.lockToScrollPos);); proto._handleKeydown \u003d funkce (událost) (pro (var i \u003d 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);

z mého vyskakovacího projektu jQuery: https: //github.com/seahorsepip/jPopup

// Zmrazení funkce posouvání obsahu stránky freeze () (if ($ ("html"). Css ("position")! \u003d "Opraveno") (var top \u003d $ ("html"). ScrollTop ()? $ (" html "). scrollTop (): $ (" body "). scrollTop (); if (window.innerWidth\u003e $ (" html "). width ()) ($ (" html "). css (" overflow-y " "," svitek ");) $ (" html "). css ((" šířka ":" 100% "," výška ":" 100% "," pozice ":" pevná "," horní ": -top ));)) // Uvolnění funkce posouvání obsahu stránky unfreeze () (if ($ ("html"). Css ("position") \u003d\u003d "fixed") ($ ("html"). Css ("position" , "static"); $ ("html, body"). scrollTop (-parseInt ($ ("html"). css ("top"))); $ ("html"). css (("pozice": "", "width": "", "height": "", "top": "", "overflow-y": ""));))

tento kód bere v úvahu problémy šířky, výšky, posuvníku a pagejump.

možné problémy vyřešené výše uvedeným kódem:

šířka, při nastavení pevné polohy může být šířka prvku html menší než 100%
výška stejná jako výše
posuvník, při nastavování polohy na pevný obsah stránky již nemá posuvník, i kdyby měl posuvník, než způsobí, že bude stránkový skok vodorovný
pagejump, pokud je nastaven na pevnou pozici, stránka scrollTop již není efektivní, což má za následek vertikální pagejump

Pokud má někdo vylepšení výše uvedeného kódu stránky zmrazení / rozmrazení, dejte mi vědět, abych mohl tato vylepšení přidat do svého projektu.

zakázat rolování:

$ (". popup"). live ((popupbeforeposition: function (event, ui) ($ ("body"). on ("touchmove", false);)));

po zavření vyskakovacího okna verze:

$ (". popup"). live ((popupafterclose: function (event, ui) ($ ("body"). unbind ("touchmove");)));

následující úryvek (pomocí jquery) zakáže rolování okna:

Var curScrollTop \u003d $ (okno) .scrollTop (); $ ("html"). toggleClass ("noscroll"). css ("top", "-" + curScrollTop + "px");

a ve vašem css:

Html.noscroll (pozice: pevná; šířka: 100%; horní: 0; vlevo: 0; výška: 100%; přetečení-y: posouvání! Důležité; z-index: 10;)

Nyní, když odstraníte modální, nezapomeňte odstranit třídu noscroll ve značce html:

$ ("html"). toggleClass ("noscroll");

Document.onwheel \u003d function (e) (// získat cílový prvek target \u003d e.target; // cílovým prvkem mohou být podřízené prvky posouvatelného prvku // např. „Li“ s uvnitř „ul“, „p "s uvnitř" div "atd. // musíme získat nadřazený prvek a zkontrolovat, zda je posouvatelný // pokud nadřazený není posouvatelný, přesuneme se nahoru k dalšímu nadřazenému prvku 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 >\u003d target.scrollHeight && e.deltaY\u003e 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 contraat. 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.

Toto je nejjednodušší řešení, jaké jsem doposud dostal. A věřte mi, vyzkoušel jsem všechny ostatní a toto je nejjednodušší. Funguje to dobře na zařízeních Windowskterý posune stránku doprava, aby měl prostor pro systémový posuvník a zařízení IOS které nevyžadují místo pro své posuvníky v prohlížečích. Takže pomocí tohoto nemusíte přidávat výplň vpravo, aby stránka neblikala, když vy skrýt přetečení těla nebo html v CSS.

řešení je docela jednoduché, pokud o tom přemýšlíte. Myšlenka je dát

Našel jsem lepší, ale kočárek kombinací sdleihssirhc myšlenky:

Window.onscroll \u003d function () (window.scrollTo (window.scrollX, window.scrollY); // nebo //window.scroll(window.scrollX, window.scrollY); // nebo záložní //window.scrollX\u003dwindow .scrollX; //window.scrollY\u003dwindow.scrollY;);

Netestoval jsem to, ale upravím to později a dám vám vědět. Jsem si 85% jistý, že funguje ve velkých prohlížečích.

V tomto článku se dozvíte, jak vypnout nebo zapnout automatické skrytí posuvníků v Universal Apps (UWP) pro váš účet Windows 10.

V operačním systému, počínaje rokem 1803, vývojáři přidali možnost, která umožňuje zakázat automatické skrývání posuvníků a bude užitečná především pro uživatele, kteří dávají přednost tomu, aby posuvníky zůstaly vždy viditelné v aplikacích UWP (XAML) a

Ve výchozím nastavení operační systém skryje posuvníky, když na ně nepřesunete kurzor. Zakázání tohoto nastavení způsobí, že posuvníky v aplikacích UWP (XAML) a v nabídce Start se budou zobrazovat jako posuvníky v plné rozšířené velikosti, i když s nimi neinteragujete.

Jak vypnout automatické skrytí posuvníků v Nastavení systému Windows

Chcete-li deaktivovat automatické skrytí posuvníků, klikněte na tlačítko na hlavním panelu. Start a poté vyberte nebo stiskněte + I

V okně „Nastavení systému Windows“, které se otevře, vyberte kategorii Speciální schopnosti

Dále vyberte kartu Zobrazit, a na pravé straně okna, v části Zjednodušení a přizpůsobení systému Windows, přepněte přepínač do polohy Vypnuto

Posuvníky se nyní budou trvale zobrazovat v Universal Apps (UWP) i v nabídce Start, i když s nimi nebudete komunikovat.

Změny můžete vrátit nastavením přepínače Automaticky skrýt posuvníky ve Windows do polohy Vč.

Jak vypnout automatické skrytí posuvníků v Editoru registru

Automatické skrytí posuvníků můžete také deaktivovat pomocí Editoru registru. Ale před provedením jakýchkoli změn v registru se doporučuje buď exportovat klíč registru přímo, ve kterém budou provedeny změny.

Otevřete editor registru, stiskněte klávesovou kombinaci + R a v okně, které se otevře, zadejte regedit a stiskněte klávesu Enter↵ nebo použijte vyhledávání Windows.

V okně Editoru registru, které se otevře, přejděte na následující cestu:

HKEY_CURRENT_USER \\ Ovládací panely \\ Přístupnost

Dále klikněte pravým tlačítkem na sekci Přístupnost nebo klikněte pravým tlačítkem na prázdnou oblast na pravé straně okna a vyberte Nové\u003e Parametr DWORD (32 bitů)... Pojmenujte vytvořený parametr DynamicScrollbars

Poté dvakrát klikněte na vytvořený parametr DynamicScrollbars a nastavte jeho hodnotu na 0 a stiskněte tlačítko OK

Změny se projeví okamžitě.

Chcete-li povolit automatické skrytí posuvníků, v parametru DynamicScrollbars nastavte hodnotu na 1
Chcete-li vypnout posuvníky automaticky skrýt, můžete provést následující: