Domov › Služby › Jak odstranit rolování v prohlížeči. Jak skrýt posuvníky? Jak odstranit posuvník. Popis problému

Jak odstranit rolování v prohlížeči. Jak skrýt posuvníky? Jak odstranit posuvník. Popis problému

A tak dnes musíte odstranit vodorovné a svislé posuvníky. Podívejme se na situace, ve kterých může takový problém nastat, a na hlavní způsoby jeho řešení.

Odstraňte posuvníky ze stránky pomocí CSS

Metoda je založena na použití CSS vlastnosti přetékat, který určuje, jak se zobrazí obsah blokové struktury, pokud (obsah) přesáhne rozměry nadřazeného prvku.

Ze všech možných hodnot této vlastnosti nás zajímá hodnota „ skrytý»:

přepad: skrytý;

který dává pokyn prohlížeči „zobrazit obsah, který se hodí; skrýt, co se nehodí“;

Použitím této vlastnosti na selektor tělo nebo html Posuvníky můžete nechat zmizet.

Podívejme se na příklad:

< html> < head> < meta charset= "UTF-8" > < title>Odebírání svitku< body> < div>

div ( výška: 2800px; )

Jak můžete vidět, máme nedotčenou čistou stránku o výšce 2800px s vertikálním posuvníkem. Nyní přidejte řádek do šablony kaskádových stylů:

html ( přetečení: skryté; )

a aktualizujte stránku.

Můžete také použít vlastnosti přetečení-y (přetečení-x) pro ovládání zobrazení nemístného obsahu pouze vertikálně (horizontálně). To znamená, že na základě příslušného kontextu můžete skrýt pouze vertikální (horizontální) posuvník.

Důležité!!!

CSS neskryje posuvníky, ale jednoduše vytvoří podmínky pro prohlížeč, za kterých je není potřeba zobrazovat. To znamená, že spolu s posuvníky ztratíte také funkci posouvání a „obsah, který se nevejde“ nebude k dispozici pro prohlížení!

Před použitím této techniky si dobře rozmyslete, zda ji vůbec potřebujete. Přeci jen malá vada a můžete ztratit užitečné informace z pohledu.

Nejodůvodněnější by bylo použít přepad: skrytý v následujících případech:

Zobrazte malou stránku, která se a priori celá vejde na obrazovku (například chybové stránky, přihlašovací stránky atd.).
Výstup malých webových formulářů
Skrytí posuvníků při vytváření vlastního posuvníku.

Doslov

Webmasteři k tomuto tématu nejčastěji přicházejí, když jasný autorský design webu klesne na nulu kvůli „nudnému“ standardnímu vzhledu systémového posuvníku. Ano, i toto se stává. V tomto případě existuje několik možností, jak problém vyřešit:

Přizpůsobte si systémové posuvníky.
Dnes je více či méně flexibilní konfigurace možná s prohlížeči založenými na webkit.

Máme k dispozici poměrně širokou škálu pseudoprvků odpovědných za konstrukční části posuvníků a pseudoselektorů, které pomáhají přizpůsobit vzhled konstrukčních částí v různých stavech.

výhody:

Posouvání systému je mnohem produktivnější JavaScript-simulátory, implementuje všechny funkce operačního systému zařízení a udržuje funkčnost mezi platformami.

nedostatky:

Neexistuje žádná záruka, že prohlížeče na jiných (ne webkit) motory budou schopny porozumět veškeré „jemnosti mentální organizace“ vašeho webu (přizpůsobení s největší pravděpodobností nenastane).

Skryjte systémové posuvníky a použijte je JavaScript-emulátor.
Zdálo by se to docela logické: pokud chcete kompatibilitu mezi prohlížeči, použijte JavaScript. Ale v tomto případě jde o krutý omyl.

Jde o to, že v tomto případě JavaScript musíte zpracovat systémové události související s rolováním. A rozhraní těchto událostí je pro každý prohlížeč výrazně odlišné, nemluvě o různých platformách. Vezměte prosím tyto informace v úvahu při používání „hotových“ j-scrollerů (zejména když zdrojová stránka tvrdí, že je plný „kříž“ bez potvrzení).

Výhody

Neomezené přizpůsobení do hloubky.

Nedostatky

Výkon emulátoru je nižší než výkon posouvání systému.
Neexistují žádné záruky funkčnosti mezi prohlížeči nebo platformami.

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

Existují 2 způsoby, jak to udělat:
1. První z nich je jednoduše odstranit prvky, které jsou mimo oblast obsahu v režimu „Design“ stránky.
2. Druhým je umístění speciálního html kódu do hlavičky stránky.

Podívej se na tohle video:

„V tomto výukovém videu se podíváme na to, jak odstranit posuvník

Jak odstranit posuvník. Popis problému.

Hned otevřeme program, vznikl zde nový projekt. Zde uděláme 75% stupnici, pro každý případ. A zvětšíme stránku. Řekněme, že na stránce máme několik objektů – jeden, dva, tři. Zde máme nějaký text, loga, obrázky, cokoliv. A omylem jste umístili objekt mimo oblast obsahu stránky.

Když kliknete na ikonu "výběr", tento objekt se vám nezobrazí. Zejména pokud máte vypnutou funkci „zobrazit okraje rámečku“ a v předchozích verzích to bylo výchozí, okraje rámečku byly vidět, jen když na něj najedete myší. Objekt, který se nachází mimo stránku, nebude vůbec viditelný, dokud na něj nenajedete myší.

Při prohlížení stránky v prohlížeči tedy dochází k horizontálnímu posouvání, které je tak nepříjemné pro všechny na webu. Pokud máte navíc barvu pozadí stránky nastavenou například na zelenou, tak při prohlížení a rolování na konec stránky uvidíte, že vaše stránka má horizontální rolování, takže bude lépe vidět.

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

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

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

Stiskneme kombinaci kláves Ctrl+ a vidíme, že za oblastí obsahu stránky nic nemáme.

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

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

Pokud se vám nepodařilo odstranit vodorovné posouvání pomocí této metody, existuje další způsob, kdy můžete toto posouvání na stránce jednoduše zakázat.

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írujte jej a vložte. Takhle vypadá.

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

I když se tedy nějaký blok nachází mimo oblast obsahu stránky, při prohlížení stránky v prohlížeči také nebudete mít horizontální rolování.

Jak odstranit posuvník. Závěr

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

A já se s vámi neloučím, odebírejte můj kanál, lajkujte, pište komentáře a sledujte moje předchozí a další video lekce. Uvidíme se přátelé, ahoj."

Jak odstranit posuvník. Dodatek k lekci.

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

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

html (overflow-x: skryté)

div ( výška : "100 %"; )

Odstranění libovolného svitku:

Používám plugin scrollTo jQuery a rád bych věděl, zda existuje nějaký způsob, jak dočasně zakázat posouvání prvku okna pomocí Javascriptu? Důvod, proč bych chtěl zakázat posouvání, je ten, že při posouvání během animace scrollTo je to opravdu ošklivé ;)

samozřejmě bych mohl udělat $("body").css("overflow", "hidden"); a poté jej vraťte na auto, když se animace zastaví, 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í pomocí koleček myši, dotyků a stisku kláves. * Použijte, když jQuery animuje pozici posouvání pro zaručenou super hladkou jízdu! */ ;(function($) ( "use strict"; var instance, proto; function UserScrollDisabler($container, options) ( // mezerník: 32, pageup: 33, pagedown: 34, end: 35, home: 36 / / vlevo: 37, nahoru: 38, vpravo: 39, dolů: 40 this.opts = $.extend(( handleKeys: true, scrollEventKeys: ), možnosti this.$container = $container (dokument); lockToScrollPos = ; this.disable(); proto = UserScrollDisabler.prototype; proto.disable = function() ( var t = this; t.lockToScrollPos = [ t.$container.scrollLeft(), t .$container.scrollTop() ]; t.$container.on("kolečko myši.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll", t._handleWheel.on("scroll.disablescroll", function() ( t._handleScrollbar.call); )); if(t.opts.handleKeys) ( t.$document.on("keydown.disablescroll", function(event) ( t._handleKeydown.call(t, event); )); ) ); = function() ( var t = this; t.$container.off(".disablescroll"); if(t.opts.handleKeys) ( t.$document.off(". disablescroll"); )); proto._handleWheel = funkce(událost) ( event.preventDefault(); ); proto._handleScrollbar = function() ( this.$container.scrollLeft(this.lockToScrollPos); this.$container.scrollTop(this.lockToScrollPos); ); proto._handleKeydown = funkce(událost) ( 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);

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

//Zmrazit funkci posouvání obsahu stránky 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 )); ) ) //Uvolnění funkce posouvání obsahu stránky unfreeze() ( if($("html").css("pozice") == "opraveno") ( $("html").css("pozice" , "statický" $("html, tělo").scrollTop(-parseInt($("html").css("html"))); "", "width": "", "height": "", "top": "", "overflow-y": ""));

tento kód zohledňuje problémy se šířkou, výškou, posuvníkem a skokem na stránku.

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

šířka, při nastavení pevné pozice může být šířka html prvku menší než 100 %
výška, stejná jako výše
posuvník, při nastavení pozice na pevnou již obsah stránky nemá posuvník, i když posuvník měl předtím, než způsobil horizontální skok
skok na stránku, při nastavení pevné pozice již není funkce scrollTop stránky účinná, což má za následek vertikální skok stránky

Pokud má někdo nějaké vylepšení výše uvedeného kódu pro zmrazení/rozmrazení stránky, dejte mi prosím 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í rolovacího vyskakovacího okna verze:

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

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

Var curScrollTop = $(window).scrollTop(); $("html").toggleClass("noscroll").css("top", "-" + curScrollTop + "px");

a ve vašem css:

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

Nyní, když odeberete modal, nezapomeňte odstranit třídu noscroll v html značce:

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

Document.onwheel = function(e) ( // získat cílový prvek target = e.target; // cílový prvek může být potomky rolovatelného prvku // např. "li"s uvnitř "ul", "p" "s uvnitř "div" atd. // potřebujeme získat rodičovský prvek a zkontrolovat, zda je rolovatelný // pokud rodič rolovat nelze, přesuneme se k dalšímu rodičovi, zatímco (target.scrollHeight 0) ( e .preventDefault() ) );

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. Kromě sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Toto je zatím nejjednodušší řešení, které jsem dostal. A věřte mi, vyzkoušel jsem všechny ostatní a toto je nejjednodušší. Funguje skvěle na zařízeních s Windows, která stránku posunou doprava, aby uvolnili místo pro systémový posuvník a iOS zařízení, která nevyžadují místo pro své posuvníky v prohlížečích. Takže pomocí tohoto nemusíte přidávat odsazení vpravo, aby stránka neblikala, když skryjete tělo nebo přetečení html pomocí v CSS.

Řešení je docela jednoduché, pokud se nad tím zamyslíte. Smyslem je dávat

Našel jsem lepší, ale bugový způsob spojením sdleihssirhcovy myšlenky:

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

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

Před odstraněním posuvníků z webové stránky si rozmyslete, zda je skutečně potřebujete. Neschopnost posouvat obsah webových stránek ztěžuje návštěvníkům našich stránek zobrazení informací. Pokud je potřeba vytvořit designové lahůdky nebo touhu vytvářet potíže pro vaše čtenáře, pak pokračujte a pusťte se do práce. Ale byli jste varováni!

Rámečky

Chcete-li ovládat zobrazení posuvníků ve snímcích, použijte parametr rolování. Může nabývat dvou hlavních hodnot: ano – vždy způsobí zobrazení posuvníků bez ohledu na množství informací a ne – jejich zobrazení zakáže (příklad 1).

Rámečky

Jak je znázorněno v příkladu, levý rámeček s názvem MENU nebude mít posuvník. I když není parametr posouvání zadán, v rámečku vedle něj budou posuvníky viditelné jako sada funkcí ve výchozím nastavení.

Nová okna

Chcete-li odstranit posuvník z nových oken, nebudou možnosti SHTML dostatečné. Univerzální přístup vyžaduje použití JavaScriptu pro vývoj nového okna. A jako jeden z parametrů metody window.open, která vytváří okno, můžete zadat scrollbar=0 . Tento atribut vytvoří okno bez vodorovných a svislých posuvníků (příklad 2).

Příklad 2: Vytvoření nového okna bez posuvníků

Nové okno

window.open("tips.SHTML", "TIP", "width=400, height=300, status=0, menubar=0, location=0, resizable=0, directories=0, toolbar=0, scrollbar=0 ");

Tento příklad otevře soubor tips.html v novém okně o velikosti 400 x 300 pixelů a bez různých navigačních prvků, včetně žádných posuvníků.

Použití stylů

Dalším způsobem je použití atributu stylu přetečení. Pokud je tento parametr aplikován na značku s hodnotou hidden , posuvník se na webové stránce nezobrazí (příklad 3).

Posuvníky

BODY ( přetečení: skryté; )

Stejným způsobem můžete posuvník odstranit z ostatních prvků webové stránky, které jej obsahují – například některé prvky formuláře.

Komentář

Výše uvedený příklad nefunguje v prohlížeči Internet Explorer, chcete-li v tomto prohlížeči skrýt posuvníky, musíte odstranit !DOCTYPE . Kód však již nebude platný.

Prohlížeč Internet Explorer také podporuje vlastnosti overflow-x a overflow-y, které umožňují skrýt posuvníky vodorovně a svisle (příklad 4).

Posuvníky

BODY ( přetečení-y: skryté; )

Pokud se ocitnete v situaci, kdy z nějakého důvodu na obrazovce nejsou žádné posuvníky, ale informace tam jsou, ale nevejdou se na obrazovku, můžete webovou stránku „posouvat“ pomocí klávesnice (nahoru a dolů šipky) nebo myši. Stiskneme tlačítko myši, když se jeho kurzor nachází kdekoli na webové stránce, a bez jeho uvolnění jej posuneme dolů. Takto je obsah zvýrazňován a posouván současně. Ale tato metoda, mírně řečeno, není příliš pohodlná a lze ji doporučit pouze ve velmi extrémních případech.

Úkol

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

Řešení

Před odstraněním posuvníků z webové stránky zvažte, zda je skutečně potřebujete. Nemožnost posouvat obsah dokumentu ztěžuje návštěvníkům webu zobrazení informací. Pokud existuje naléhavá potřeba vytvořit designové lahůdky nebo touha vytvářet potíže pro vaše čtenáře, pokračujte. Ale byli jste varováni!

Metoda je založena na použití vlastnosti overflow, 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 html ( přetečení: skryté; ) div ( výška: 2000px; ) Bla bla

Tento příklad používá skrytou hodnotu, která „ořízne“ veškerý obsah mimo prvek.

Můžete také použít vlastnost overflow-x pro skrytí pouze vodorovného posuvníku a overflow-y pro skrytí vertikálního posuvníku. Příklad 2 ukazuje přidání vrstvy o minimální šířce 800 pixelů. Když se okno prohlížeče zmenší na tuto velikost, vrstva přestane měnit svou velikost a zobrazí se vodorovný posuvník. Vlastnost overflow-x skryje posuvníky.

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

HTML5 CSS3 IE Cr Op Sa Fx

Posuvníky html ( overflow-x: hidden; ) div ( min-width: 800px; /* Minimální šířka */ pozadí: #fc0; /* Barva pozadí */ padding: 10px; /* Okraje kolem textu */ ) Bla-blah

Vlastnosti overflow-x a overflow-y jsou součástí specifikace CSS3 a nejsou ověřeny kontrolami stylu CSS2.1.

Oblíbené v kategorii: