Korzystam z wtyczki scrollTo jQuery i chciałbym wiedzieć, czy w jakiś sposób można tymczasowo wyłączyć przewijanie elementu okna za pomocą Javascript? Powodem, dla którego chciałbym wyłączyć przewijanie jest to, że przewijanie podczas przewijania Aby się animować, robi się naprawdę brzydkie;)
Oczywiście, mógłbym zrobić $("body").css("overflow", "hidden");
a następnie ustawić go z powrotem na auto, gdy animacja się zatrzyma, ale byłoby lepiej, gdyby pasek przewijania był nadal widoczny, ale nieaktywny.
javascript
jquery
scroll
Olivier Lalonde
źródło
źródło
Odpowiedzi:
scroll
Zdarzenie nie może być anulowane. Możesz to jednak zrobić, anulując następujące zdarzenia interakcji: przewijaniemyszą i dotykiem oraz przyciski związane z przewijaniem.
[ Działające demo ]
AKTUALIZACJA: naprawiono przeglądarki Chrome na komputery stacjonarne i nowoczesne przeglądarki mobilne z pasywnymi odbiornikami
źródło
Zrób to po prostu dodając klasę do treści:
Dodaj klasę, a następnie usuń, jeśli chcesz ponownie włączyć przewijanie, przetestowane w IE, FF, Safari i Chrome.
W przypadku urządzeń mobilnych musisz obsłużyć
touchmove
wydarzenie:I cofnij powiązanie, aby ponownie włączyć przewijanie. Testowane w iOS6 i Android 2.3.3
źródło
touchmove
zdarzeniem, jak w przypadku$('body').bind('touchmove', function(e){e.preventDefault()})
. Edytowałem tę odpowiedź, aby uwzględnić to rozwiązanie mobilne.$('body,html')
Oto naprawdę prosty sposób:
W IE6 jest to trochę nerwowe.
źródło
(0, 0)
, wystarczy użyć bieżącej pozycji przewijania.Poniższe rozwiązanie jest proste, ale czyste JavaScript (bez jQuery):
źródło
scroll-behavior: smooth
rozwal to. Poza tym nie zgadzam się z Oto, że to wina przeglądarki. Zasadniczo zakładasz, że coś stanie się natychmiast, gdy w rzeczywistości jest asynchroniczneTo rozwiązanie utrzyma bieżącą pozycję przewijania, gdy przewijanie jest wyłączone, w przeciwieństwie do niektórych, które skaczą użytkownika z powrotem na górę.
Opiera się na odpowiedzi Galambalazs , ale z obsługą urządzeń dotykowych i został przekształcony w pojedynczy obiekt z opakowaniem wtyczki jquery.
Demo tutaj.
Na github tutaj.
źródło
mousewheel
zadziałałoPrzepraszam, że odpowiedziałem na stary post, ale szukałem rozwiązania i natknąłem się na to pytanie.
Istnieje wiele obejść tego problemu, aby nadal wyświetlać pasek przewijania, na przykład nadanie kontenerowi 100% wysokości i
overflow-y: scroll
stylu.W moim przypadku właśnie utworzyłem div z paskiem przewijania, który wyświetlam podczas dodawania
overflow: hidden
do treści:Pasek przewijania elementu musi mieć następujące style:
To pokazuje szary pasek przewijania, mam nadzieję, że pomoże przyszłym użytkownikom.
źródło
Szukałem rozwiązania tego problemu, ale nie byłem zadowolony z żadnego z powyższych rozwiązań ( pisząc tę odpowiedź ), więc wymyśliłem to rozwiązanie.
CSS
JS
źródło
overflow-y: scroll
do tego.scrollDisabled
stylu. W przeciwnym razie nastąpił niewielki skok, ponieważ pasek przewijania chował się za każdym razem. Oczywiście działa to tylko dla mnie, ponieważ moja strona jest wystarczająco długa, aby potrzebować paska przewijania nawet na największych ekranach.Zgodnie z postem z galambalazs dodałbym obsługę urządzeń dotykowych, pozwalając nam dotykać, ale nie przewijaj w górę lub w dół:
źródło
Począwszy od Chrome 56 i innych nowoczesnych przeglądarek, musisz dodać
passive:false
doaddEventListener
połączenia, abypreventDefault
zadziałało. Używam tego, aby zatrzymać przewijanie na telefonie komórkowym:źródło
Nie, nie wybrałbym obsługi zdarzeń, ponieważ:
nie wszystkie zdarzenia mają gwarancję dotarcia do ciała,
zaznaczanie tekstu i przesuwanie w dół powoduje przewijanie dokumentu,
jeśli w fazie zdarzenia odłączenie czegoś pójdzie nie tak, jesteś skazany.
Ugryzłem się przez to, wykonując operację kopiuj-wklej z ukrytym obszarem tekstowym i zgadnij co, strona przewija się za każdym razem, gdy robię kopię, ponieważ wewnętrznie muszę wybrać obszar tekstowy przed wywołaniem
document.execCommand('copy')
.W każdym razie w ten sposób idę, zauważ
setTimeout()
:Pęd miga, gdy paski przewijania znikają na chwilę, ale myślę, że jest to do przyjęcia.
źródło
W zależności od tego, co chcesz osiągnąć za pomocą usuniętego zwoju, możesz po prostu naprawić element, z którego chcesz usunąć zwój (po kliknięciu lub dowolnym innym wyzwalaczu, który chcesz tymczasowo wyłączyć przewijanie)
Szukałem rozwiązania „temp no scroll” i moje potrzeby to rozwiązało
zrobić klasę
potem z Jquery
Przekonałem się, że było to dość proste rozwiązanie, które działa dobrze we wszystkich przeglądarkach, a także ułatwia korzystanie z urządzeń przenośnych (np. IPhone'ów, tabletów itp.). Ponieważ element jest tymczasowo naprawiony, nie ma przewijania :)
UWAGA! W zależności od umiejscowienia elementu „contentContainer” może być konieczne dostosowanie go od lewej. Można to łatwo zrobić, dodając lewą wartość css do tego elementu, gdy stała klasa jest aktywna
źródło
Inne rozwiązanie:
W ten sposób zawsze masz pionowy pasek przewijania, ale ponieważ większość mojej zawartości jest dłuższa niż rzutnia, jest to dla mnie w porządku. Treść jest wyśrodkowana oddzielnym div, ale bez ponownego ustawiania marginesu w treści moja treść pozostanie po lewej stronie.
Są to dwie funkcje, których używam, aby pokazać moje popup / modal:
Wynik: nie można przewijać tła i nie zmienia się położenia zawartości z powodu lewego paska przewijania. Testowane z obecnymi FF, Chrome i IE 10.
źródło
Co powiesz na to? (Jeśli używasz jQuery)
źródło
Korzystam z showModalDialog , aby wyświetlić stronę pomocniczą jako modalne okno dialogowe.
aby ukryć paski przewijania okna głównego:
a podczas zamykania modalnego okna dialogowego, pokazując paski przewijania okna głównego:
aby uzyskać dostęp do elementów w oknie głównym z okna dialogowego:
tylko dla osób szukających showModalDialog : (po wierszu 29 oryginalnego kodu)
źródło
Anulowanie wydarzenia zgodnie z przyjętą odpowiedzią jest, moim zdaniem, okropną metodą: /
Zamiast tego użyłem
position: fixed; top: -scrollTop();
poniżej.Demo: https://jsfiddle.net/w9w9hthy/5/
Z mojego wyskakującego projektu jQuery: https://github.com/seahorsepip/jPopup
Ten kod uwzględnia kwestie szerokości, wysokości, paska przewijania i pagejump.
Możliwe problemy rozwiązane za pomocą powyższego kodu:
Jeśli ktoś ma jakieś poprawki do powyższego kodu blokowania / odblokowywania strony, daj mi znać, żebym mógł dodać te poprawki do mojego projektu.
źródło
źródło
Mam ten sam problem, poniżej jest sposób, w jaki sobie z nim radzę.
Mam nadzieję, że to pomoże.
źródło
Opierając się na odpowiedzi Cheyenne Forbes, którą znalazłem tutaj przez fcalderan: Wyłącz wyłączenie przewijania, nie ukryć? i naprawić znikający pasek przewijania Hallodomy
CSS:
JS:
Ten kod przeskakuje cię na górę strony, ale myślę, że kod fcalderana ma obejście.
źródło
Wiem, że to stare pytanie, ale musiałem zrobić coś bardzo podobnego, a po pewnym czasie szukając odpowiedzi i próbując różnych podejść, skończyłem na bardzo łatwym rozwiązaniu.
Mój problem był bardzo podobny, prawie identyczny, jedyną różnicą jest to, że tak naprawdę nie musiałem pokazywać paska przewijania - musiałem tylko upewnić się, że jego szerokość będzie nadal używana, więc szerokość strony nie zmieni się podczas wyświetlania mojej nakładki .
Kiedy zaczynam przesuwać moją nakładkę na ekran, robię:
a po zsunięciu nakładki z ekranu robię:
WAŻNE: działa to doskonale, ponieważ moja nakładka jest ustawiona
absolute
,right: 0px
kiedyvisible
.źródło
Najprostsza metoda to:
Aby cofnąć to:
Łatwy do wdrożenia, ale jedynym minusem jest:
Jest to spowodowane usunięciem paska przewijania i powiększeniem widoku.
źródło
body
nahtml
zamiast.overflow:hidden
nie działaOto moje rozwiązanie, aby zatrzymać przewijanie (bez jQuery). Używam go do wyłączania przewijania, gdy pojawia się menu boczne.
Umieściłem 17px padding-right, aby zrekompensować zniknięcie paska przewijania. Jest to jednak problematyczne, głównie w przypadku przeglądarek mobilnych. Rozwiązany przez uzyskanie zgodnie z tym szerokości pręta .
Wszystko razem w tym piórze.
źródło
Mam podobny problem na urządzeniach dotykowych. Dodanie „akcji dotykowej: brak” do elementu rozwiązało problem.
Po więcej informacji. Spójrz na to:-
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
źródło
To najprostsze rozwiązanie, jakie do tej pory mam. I wierz mi, próbowałem wszystkich innych i to jest najłatwiejsze. Działa świetnie na urządzeniach z systemem Windows , które popychają stronę z prawej strony, aby mieć miejsce na systemowy pasek przewijania i urządzenia IOS, które nie wymagają miejsca na paski przewijania w przeglądarkach. Używając tego, nie będziesz musiał dodawać dopełnienia po prawej stronie, aby strona nie migała, gdy ukryjesz przepełnienie treści lub HTML za pomocą css .
Rozwiązanie jest dość proste, jeśli się nad tym zastanowić. Chodzi o to, aby nadać window.scrollTop () tej samej dokładnej pozycji w momencie otwarcia wyskakującego okienka. Zmień także tę pozycję, gdy zmienia się rozmiar okna (ponieważ pozycja przewijania zmienia się, gdy to nastąpi).
Więc zaczynamy...
Najpierw stwórzmy zmienną, która da ci znać, że okienko jest otwarte i nazwij go stopWindowScroll . Jeśli tego nie zrobimy, pojawi się błąd niezdefiniowanej zmiennej na stronie i ustawi się na 0 - jako nieaktywną.
Teraz zróbmy funkcję otwartego wyskakującego okienka, która może być dowolną funkcją w kodzie, która wyzwala dowolne wyskakujące okienko używane jako wtyczka lub niestandardowe. W tym przypadku będzie to zwykłe niestandardowe okno podręczne z prostym dokumentem po kliknięciu.
Więc następną rzeczą, którą robimy, jest utworzenie funkcji zamykania wyskakującego okienka, którą powtarzam ponownie, może być dowolną funkcją, którą już utworzyłeś lub używasz we wtyczce. Ważne jest to, że potrzebujemy tych 2 funkcji, aby ustawić zmienną stopWindowScroll na 1 lub 0, aby wiedzieć, kiedy jest otwarta lub zamknięta.
Następnie stwórzmy funkcję window.scroll, abyśmy mogli zapobiec przewijaniu, gdy wspomniany wyżej stopWindowScroll zostanie ustawiony na 1 - jako aktywny.
Otóż to. Nie wymaga CSS, aby działał, z wyjątkiem własnych stylów strony. To działało jak urok dla mnie i mam nadzieję, że pomoże tobie i innym.
Oto działający przykład JSFiddle:
JS Fiddle Przykład
Daj mi znać, czy to pomogło. Pozdrowienia.
źródło
źródło
Ten kod będzie działał na Chrome 56 i dalszych (oryginalna odpowiedź już nie działa na Chrome).
Posługiwać się
DomUtils.enableScroll()
aby włączyć przewijanie.Użyj,
DomUtils.disableScroll()
aby wyłączyć przewijanie.źródło
Aby zapobiec skokowi, użyłem tego
i w moim css
źródło
Znalazłem tę odpowiedź na innej stronie :
Wyłącz przewijanie:
Po zamknięciu wyskakującego okienka przewiń:
źródło
rozwiązanie galambalazs jest świetne! Działa idealnie dla mnie zarówno w Chrome, jak i Firefox. Można go również rozszerzyć, aby zapobiec domyślnemu zdarzeniu z okna przeglądarki. Powiedzmy, że robisz aplikację na płótnie. Możesz to zrobić:
A potem w aplikacji powiedzmy, że będziesz przetwarzać własne zdarzenia, takie jak mysz, klawiatura, zdarzenia dotykowe itd. Możesz wyłączyć zdarzenia domyślne, gdy mysz znajdzie się w obszarze roboczym, i włączyć je ponownie, gdy mysz wychodzi:
Możesz nawet wyłączyć menu prawego przycisku myszy dzięki temu hackowi:
źródło
Miałem podobny problem z animacją na ekranach telefonów komórkowych, ale nie na laptopach, kiedy próbowałem animować div za pomocą polecenia animacji jquery. Postanowiłem więc użyć timera, który tak często przywracał pozycję przewijania okna, że gołym okiem dokument wydawał się statyczny. To rozwiązanie działało idealnie na małym urządzeniu mobilnym, takim jak Samsung Galaxy-2 lub iPhone-5.
Główna logika tego podejścia : Timer ustawiający pozycję przewijania okna na pierwotną pozycję przewijania powinien zostać uruchomiony przed poleceniem animacji jquery, a następnie po zakończeniu animacji musimy wyczyścić ten timer (
original scroll position
jest to pozycja tuż przed rozpoczęciem animacji).Z przyjemnością zdziwiłem się, że dokument rzeczywiście wydawał się statyczny podczas trwania animacji, jeśli interwał czasowy był taki
1 millisecond
, do czego dążyłem.KOLEJNE ROZWIĄZANIE, które działało : Na podstawie odpowiedzi Mohammada Aniniego pod tym postem, aby włączyć / wyłączyć przewijanie, odkryłem również, że zmodyfikowana wersja kodu, jak poniżej, działała.
źródło
Proste rozwiązanie, które zadziałało dla mnie (tymczasowe wyłączenie przewijania okna).
Na podstawie tego skrzypka: http://jsfiddle.net/dh834zgw/1/
następujący fragment kodu (używając jquery) wyłączy przewijanie okna:
I w twoim css:
Teraz, kiedy usuwasz modal, nie zapomnij usunąć klasy noscroll z tagu html:
źródło