A scrollTo jQuery beépülő modult használom, és szeretném tudni, hogy ideiglenesen letiltható-e egy ablakelem görgetése Javascripten keresztül? Azért szeretném letiltani a görgetést, mert amikor görgetsz, amikor a scrollTo funkció animál, az nagyon csúnya lesz ;)
Természetesen megtehetném $("body").css("overflow", "hidden"); majd az animáció leállásakor visszaállítja az automatikus módba, de jobb lenne, ha a görgetősáv továbbra is látható lenne, de inaktív.
27 válaszA görgetési esemény nem törölhető. Ez azonban megtehető a következő interakciós események törlésével:
Egér és érintés görgetés és görgetéshez kapcsolódó gombok.
Ehhez egyszerűen adjon hozzá egy osztályt a törzshöz:
A görgetés leállítása ( magasság: 100%; túlcsordulás: rejtett; )
Adjon hozzá egy osztályt, és távolítsa el, ha újra engedélyezni szeretné a görgetést, tesztelve IE, FF, Safari és Chrome böngészőben.
$("body").addClass("stop-scrolling")
Mobileszközök esetén kezelnie kell a touchmove eseményt:
$("body").bind("touchmove", function(e)(e.preventDefault()))
És oldja fel a rögzítést, hogy ismét engedélyezze a görgetést. Tesztelve iOS6 és Android 2.3.3 alatt
$("body").unbind("touchmove")
A következő megoldás alapvető, de tiszta JavaScript (nincs jQuery):
függvény disableScrolling())( var x=window.scrollX; var y=window.scrollY; window.onscroll=function())(window.scrollTo(x, y);); ) függvény enableScrolling())( window.onscroll =függvény( )(); )
Bocsánat, hogy egy régi bejegyzésre válaszolok, de megoldást kerestem, és ezzel a kérdéssel találkoztam.
Számos módja van a probléma megoldására, hogy továbbra is megjelenítse a görgetősávot, például 100%-os magasságot ad a tárolónak, és egy overflow-y: görgetőstílust.
Az én esetemben most létrehoztam egy div-t egy görgetősávval, amelyet úgy jelenítek meg, hogy hozzáadom a túlcsordulást: rejtett a törzshöz:
A disableScroll() függvény ( document.getElementById("scrollbar").style.display = "block"; document.body.style.overflow = "rejtett"; )
Az elem görgetősávjának a következő stílusokkal kell rendelkeznie:
Overflow-y: görgetés; felső: 0; jobbra: 0; kijelző: nincs; magasság: 100%; pozíció: rögzített;
Itt látható a szürke görgetősáv, remélhetőleg a jövőbeli látogatók segítségére lesz.
Galambalazs bejegyzése szerint az érintőképernyős eszközök támogatását adnám hozzá, lehetővé téve, hogy megérintsük, de ne görgessünk fel vagy le:
Függvény disable_scroll() ( ... document.ontouchmove = function(e)( e.preventDefault(); ) ) function enable_scroll() ( ... document.ontouchmove = function(e)( return true; ) )
Erre a problémára kerestem megoldást, de a fenti megoldások egyikével sem voltam elégedett (a válasz írásakor), így ezt a megoldást találtam.
ScrollDisabled (pozíció: rögzített; margó felső: 0; // felülbírálja JS-t, hogy az acc-t használja a $(ablak) curr-hez. scrollTop() szélessége: 100%; )
Var y_offsetWhenScrollDisabled=0; function disableScrollOnBody())( y_offsetWhenScrollDisabled= $(window).scrollTop(); $("body").addClass("scrollDisabled").css("margin-top", -y_offsetWhenScrollDisabled; ) function enable()ScrollDisabled(Bo) $( "body").removeClass("scrollDisabled").css("margin-top", 0); $(window).scrollTop(y_offsetWhenScrollDisabled); )
Egy másik megoldás:
Így mindig van egy függőleges görgetősáv, de mivel a tartalmaim többsége hosszabb, mint a nézet, ez nekem megfelelő. A tartalom egy külön div elem segítségével van középre állítva, de a margó visszaállítása nélkül a tartalom a bal oldalon marad.
A következő két funkciót használom a popup/modal megjelenítésére:
Var popup_bodyTop = 0; var popup_bodyLeft = 0; function popupShow(id) ( $("#"+ id).effect("fade"); $("#popup-overlay").effect("fade"); // emlékszik az aktuális scroll-pozícióra // mert amikor beállítás/törlés pozíció: testhez rögzítve // a törzs 0.0-ra gördül popup_bodyLeft = $(document).scrollLeft(); popup_bodyTop = $(document).scrollTop(); // pozíció megfordítása var x = - popup_bodyLeft; var y = - popup_bodyTop; $("body").css("pozíció", "fix"); $("body").css("top", y.toString() +"px"); $( "body" ").css("left", x.toString() +"px"); ) függvény popupHide(id) ( $("#"+ id).effect("fade"); $("#popup -overlay ").effect("fade"); $("body").css("position", ""); $("html, body").scrollTop(popup_bodyTop); $("html, body" ). scrollLeft(popup_bodyLeft); )
Eredmény: nem gördülő háttér és a tartalom áthelyezése a bal oldali görgetősáv miatt. A jelenlegi FF, Chrome és IE 10 segítségével tesztelve.
Mit szólsz ehhez? (Ha jQuery-t használsz)
Var $ablak = $(ablak); var $body = $(ablak.dokumentum.test); window.onscroll = function() ( var overlay = $body.children(".ui-widget-overlay").first(); // Ellenőrizze, hogy látható-e a fedvény, és állítsa vissza az előző görgetési állapotot if (overlay.is( ":visible")) ( var scrollPos = $body.data("scroll-pos") || ( x: 0, y: 0 ); window.scrollTo(scrollPos.x, scrollPos.y); ) else ( / / Csak tárolja a görgetés állapotát $body.data("scroll-pos", ( x: $window.scrollLeft(), y: $window.scrollTop() )); ) );
Attól függően, hogy mit szeretne elérni a távoli görgetéssel, egyszerűen kijavíthatja azt az elemet, amelyről eltávolítani szeretné a görgetést (kattintásra vagy bármely olyan triggerre, amellyel ideiglenesen le szeretné tiltani a görgetést)
Kerestem egy "temp no scroll" megoldást, és az én igényeimre ez megoldotta
osztályt készíteni
Rögzített (pozíció: rögzített; )
majd a Jquery-vel
Var someTrigger = $("#trigger"); //a trigger gomb var contentContainer = $("#content"); //elem Ideiglenesen el szeretném távolítani a görgetést a contentContainer-ből.addClass("notfixed"); //győződjön meg arról, hogy az elem rendelkezik a "notfixed" osztálytal //Valami, ami kiváltja a rögzített pozicionálást. Ebben az esetben egy gombot választottunk. someTrigger.on("click", function())(if(contentContainer.hasClass("notfixed"))( contentContainer.removeClass("notfixed").addClass("fixed"); )else if(contentContainer.hasClass(") javítva "))( contentContainer.removeClass("javítva").addClass("nem javítva"); ); ));
Ezt egy meglehetősen egyszerű megoldásnak találtam, amely minden böngészőben jól működik, és könnyen használható hordozható eszközökön is (pl. iPhone, tablet, stb.). Mivel az elem ideiglenesen rögzített, nincs görgetés :)
FIGYELEM! A "contentContainer" elem elhelyezésétől függően előfordulhat, hogy balra kell igazítania. Ez könnyen megtehető egy bal oldali CSS érték hozzáadásával ehhez az elemhez, amikor a rögzített osztály aktív
ContentContainer.css(( "left": $(window).width() - contentContainer.width()/2 //Ez azt eredményezi, hogy az ablak teljes szélessége mínusz a "középre" kívánt elem osztva kettő (mivel csak az egyik oldalról van tolva));
A jQuery popup projektemből https://github.com/seahorsepip/jPopup p>
//Oldaltartalom görgetési függvényének befagyasztása 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": "fix", "top": -top )); ) ) //Oldaltartalom feloldása görgető függvény unfreeze() ( if($("html").css("position") == "fixed") ( $("html").css("pozíció" , "static"); $("html, body").scrollTop(-parseInt($("html").css("top"))); $("html").css(("pozíció": "", "width": "", "height": "", "top": "", "overflow-y": "")); ) )
Ez a kód figyelembe veszi a szélesség, magasság, görgetősáv és oldalugrás problémáit.
A fenti kóddal megoldott lehetséges problémák:
- szélesség, rögzített beépítési pozíció mellett a html elem szélessége 100%-nál kisebb is lehet
- magassága megegyezik a fentivel
- görgetősáv, amikor egy rögzített pozícióban az oldaltartalom pozíciójában már nincs görgetősáv, még akkor sem, ha volt görgetősáv az oldalugrás előtt
- oldalugrás, ha a pozíció beállítása rögzített, a scrollTop már nincs érvényben, ezért az oldal függőlegesen ugrik
Ha valakinek van bármilyen fejlesztése a fenti oldal fagyasztási/olvadási kódjával kapcsolatban, kérem, értesítsen, hogy hozzáadhassam ezeket a fejlesztéseket a projektemhez.
A Chrome 56-tól és más modern böngészőktől kezdve hozzá kell adni a passive:false-t az addEventListener híváshoz, hogy a preventDefault működjön. Tehát ezt használom a görgetés leállítására mobilon:
A preventDefault(e)(e.preventDefault(); ) függvény disableScroll())( document.body.addEventListener("touchmove", preventDefault, ( passzív: false )); ) function enableScroll())( document.body.removeEventListener (" touchmove", preventDefault, ( passzív: false )); )
Cheyenne Forbes válaszára építve, amelyet itt találtam az fcalderan-on keresztül: Csak tiltsd le a görgetést, ne rejtsd el? és javítsa ki a görgetősáv eltűnését a Hallodomban
Preventscroll(pozíció: rögzített; túlcsordulás-y:görgetés; )
Whatever.onclick = function())( $("body").addClass("preventscroll"); ) whatevertoclose.onclick = function())( $("body").removeClass("preventscroll"); )
Ez a kód az oldal tetejére viszi, de úgy gondolom, hogy az fcalderan kódjának van megoldása.
Nekem is ugyanez a problémám, lentebb a megoldás módja.
/* file.js */ var body = document.getElementsByTagName("body"); //ha az ablak nem görget body.classList.add("no-scroll"); //ha ablak görgetés body.classList.remove("no-scroll"); /* file.css */ .no-scroll( pozíció: rögzített; felső: 0; alsó: 0; bal: 0; jobb: 0; )
remélem ez segít.
A legegyszerűbb módja:
$("body").css("túlcsordulás", "rejtett"); // Ideiglenesen távolítsa el a görgetősávot
Ennek visszavonásához:
$("body").css("túlcsordulás", "auto");
Könnyen kivitelezhető, de az egyetlen hátránya:
- Az oldal kissé balra mozdul, ha középre (vízszintesen) van állítva.
Ennek az az oka, hogy a görgetősávot eltávolították, és a nézeti ablak kissé szélesebb lett.
Itt van a megoldásom a görgetés leállítására (jQuery nélkül). A görgetés letiltására használom, amikor megjelenik az oldalsó menü.
scroll var letiltása/engedélyezése noscroll_var; function noscroll())( if(noscroll_var)( document.getElementsByTagName("html").style.overflowY = ""; document.body.style.paddingRight = "0"; noscroll_var = false )else( document.getElementsByTagName(") html ").setAttribute("style", "overflow-y: hidden !important"); document.body.style.paddingRight = "17px"; noscroll_var = true ) )/*noscroll()*/ for(var i= 0 ; i $("html").width()) ( $("html").css("overflow-y", "scroll"); ) $("html").css(("width": " 100%", "magasság": "100%", "pozíció": "rögzített", "felső": -top)); ) ) //Oldaltartalom feloldása görgető függvény unfreeze() ( if($("html").css("position") == "fixed") ( $("html").css("pozíció", "static" "); $("html, body").scrollTop(-parseInt($("html").css("top"))); $("html").css(("position": "", "width": "", "height": "", "top": "", "overflow-y": "")); ) )
ez a kód figyelembe veszi a szélességgel, magassággal, görgetősávval és oldalugrással kapcsolatos problémákat.
A fenti kóddal megoldott lehetséges problémák:
- szélesség, fix pozíció beállításakor a html elem szélessége 100%-nál kisebb is lehet
- magassága, ugyanaz, mint fent
- görgetősáv, ha a pozíciót rögzítettre állítja, az oldaltartalomnak már nincs görgetősávja, még akkor sem, ha volt görgetősáv, mielőtt vízszintes oldalugrást okozna
- oldalugrás, fix pozíció beállításakor az oldal scrollTop már nem hatékony, ami függőleges oldalugrást eredményez
Ha valakinek van bármilyen fejlesztése a fenti oldal lefagyasztó/feloldó kódjával kapcsolatban, kérem jelezze, hogy hozzáadhassam ezeket a fejlesztéseket a projektemhez.
görgetés letiltása:
$(".popup").live(( felugró ablak előtt: function(event, ui) ( $("body").on("touchmove", false; ) ));
a verzió görgető felugró ablakának bezárása után:
$(".popup").live(( popupafterclose: function(event, ui) ( $("body").unbind("touchmove"); ) ));
A következő kódrészlet (a jquery használatával) letiltja az ablak görgetését:
Var curScrollTop = $(ablak).scrollTop(); $("html").toggleClass("noscroll").css("top", "-" + curScrollTop + "px");
és a css-ben:
Html.noscroll( pozíció: rögzített; szélesség: 100%; felül: 0; bal: 0; magasság: 100%; túlcsordulás-y: görgetés !fontos; z-index: 10; )
Most, amikor eltávolítja a modált, ne felejtse el eltávolítani a noscroll osztályt a html címkéből:
$("html").toggleClass("noscroll");
Document.onwheel = function(e) ( // a célelem lekérése target = e.target; // a célelem lehet a görgethető elem gyermekei // pl. az "li" egy "ul"-ban, "p" "s egy "div"-ben stb. // meg kell szereznünk a szülőelemet és ellenőriznünk kell, hogy görgethető-e // ha a szülő nem görgethető, akkor feljebb lépünk a következő szülőre míg (target.scrollHeight 0) ( e .preventDefault(); ) ); törzs (háttér: gainsboro; ) #box (szélesség: 300px; magasság: 600px; kitöltés: 5px; szegély: 1px tömör ezüst; margó: 50px automatikus; háttér: fehér; túlcsordulás: automatikus; )
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.
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.
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.
Ez a legegyszerűbb megoldás, amit eddig kaptam. És hidd el, az összes többit kipróbáltam, és ez a legegyszerűbb. Kiválóan működik Windows-eszközökön, amely az oldalt jobbra tolja, hogy helyet adjon a rendszer görgetősávjának és az iOS-eszközöknek, amelyek nem igényelnek helyet a böngészők görgetősávjai számára. Így ezt használva nem kell jobb oldalt kitöltenie, hogy az oldal ne villogjon, amikor elrejti a törzset vagy a html túlcsordulást a CSS-ben.
A megoldás nagyon egyszerű, ha jobban belegondolunk. Az ötlet az, hogy adjunk
Találtam egy jobb, de hibás módszert az sdleihssirhc ötletének kombinálásával:
Window.onscroll = function() ( window.scrollTo(window.scrollX, window.scrollY); //Vagy //window.scroll(window.scrollX, window.scrollY); //Vagy tartalék //window.scrollX=window .scrollX; //window.scrollY=window.scrollY; );
Nem teszteltem, de később szerkesztem és értesítem. 85%-ig biztos vagyok benne, hogy működik a nagyobb böngészőkben.
Ez a cikk bemutatja, hogyan lehet letiltani vagy engedélyezni az automatikus elrejtő görgetősávokat a Universal Apps (UWP) alkalmazásban a fiókjában a Windows 10 rendszerben.
Az operációs rendszerbe 1803-tól kezdődően a fejlesztők hozzáadtak egy lehetőséget, amely lehetővé teszi a görgetősávok automatikus elrejtésének letiltását, és elsősorban azoknak a felhasználóknak lesz hasznos, akik azt szeretik, hogy a görgetősávok mindig láthatóak maradjanak az UWP alkalmazásokban (XAML) és
Alapértelmezés szerint az operációs rendszer elrejti a görgetősávokat, ha az egérmutató nem áll felettük. A beállítás letiltása esetén a görgetősávok az UWP-alkalmazásokban (XAML) és a Start menü görgetősávként jelennek meg teljes kibontott méretükben, még akkor is, ha Ön nem kommunikál velük.
Az automatikus elrejtő görgetősávok letiltása a Windows beállításaiban
Az automatikusan elrejtő görgetősávok kikapcsolásához kattintson a Start gombra a tálcán, majd válassza ki vagy nyomja meg a + I billentyűt
A megnyíló Windows Beállítások alkalmazás ablakában válassza ki a Kisegítő lehetőségek kategóriát
Ezután válassza ki a Megjelenítés lapot, és az ablak jobb oldalán, a Windows egyszerűsítése és személyre szabása részben állítsa a kapcsolót Ki állásba.
A görgetősávok mostantól mindig megjelennek az Univerzális alkalmazásokban (UWP), valamint a Start menüben, még akkor is, ha Ön nem használja őket.
A módosításokat visszavonhatja, ha a Windows görgetősávjainak automatikus elrejtése kapcsolót Be állásba állítja.
Az automatikus elrejtő görgetősávok letiltása a Rendszerleíróadatbázis-szerkesztőben
A beállításszerkesztővel letilthatja a görgetősávok automatikus elrejtését is. Mielőtt azonban bármilyen módosítást végezne a rendszerleíró adatbázisban, javasoljuk, hogy közvetlenül exportálja azt a beállításjegyzék-szakaszt, amelybe a módosításokat végrehajtja.
Nyissa meg a beállításszerkesztőt a + R billentyűkombináció megnyomásával, és a megnyíló ablakban írja be a regedit parancsot, majd nyomja meg az Enter billentyűt, vagy használja a Windows keresést.
A megnyíló Registry Editor ablakban lépjen a következő elérési útra:
Ezután kattintson jobb gombbal a Kisegítő lehetőségek szakaszra, vagy kattintson jobb gombbal az ablak jobb oldalán lévő üres területre, és válassza az Új > Duplaszó (32 bites) értéket a helyi menüből. Nevezze el a létrehozott paramétert DynamicScrollbars-nak
Ezután kattintson duplán a létrehozott DynamicScrollbars paraméterre, állítsa az értékét 0-ra, majd kattintson az OK gombra
A változtatások azonnal életbe lépnek.
A görgetősávok automatikus elrejtésének engedélyezéséhez állítsa a DynamicScrollbars lehetőséget 1-re
Az automatikus elrejtő görgetősávok letiltásához a következőket teheti:
"DynamicScrollbars"=dword:00000000
A műveletek visszavonásához és ezáltal a görgetősávok automatikus elrejtéséhez hozzon létre és alkalmazzon egy regisztrációs fájlt a következő tartalommal:Windows Registry Editor 5.00 verzió
"DynamicScrollbars"=dword:00000001
A rendszerleíró adatbázis fájlok alkalmazása után ki kell jelentkeznie, majd újra be kell jelentkeznie ahhoz, hogy a módosítások érvénybe lépjenek.