Jak zapobiec przewijaniu ekranu po przeciągnięciu myszą, gdy element pozycjonowany absolutnie jest (częściowo) wyłączony z ekranu?

Nie chcę, aby moja strona przewijała się. Mam <body> o szerokości 100%, ustawiłem jego overflow na hidden i na ogół działa. Bez pasków przewijania, bez przesuwania gestów myszy/touchpada. Ale jeśli kliknę i przeciągnę w dowolnym miejscu, nadal mogę przewijać.Jak zapobiec przewijaniu ekranu po przeciągnięciu myszą, gdy element pozycjonowany absolutnie jest (częściowo) wyłączony z ekranu?

Stinker jest to, że mam div ustawiony absolutnie tak, że trzyma się poza rodzicem, częściowo (a czasem całkowicie) poza ekranem. Z kilku powodów nie mogę tego teraz ominąć.

Ten skrzypce ilustruje mój problem (widzę go w WebKit), http://jsfiddle.net/ax5x7/2/

Przeciąganie prawie wszędzie na prawo w HTML spowoduje stronę przesuwają się wzdłuż. Trudno jest wrócić, ponieważ nie ma pasków przewijania, więc jeśli zrobisz to przez pomyłkę, wygląda źle.

Kręcenie tutaj znalazło jedną sugestię związaną z wycofaniem jQuery disableSelection(), ale chyba że robię to źle (zastosowałem to do ciała jak i wszystkich dzieci) to wydaje się nie przeszkadzać w zachowaniu. Znalazłem także pytanie sprzed kilku lat, które nie miało satysfakcjonującego rozwiązania. Bandaid jest trochę kludgy, wolałbym nie przewijać do (0,0) w przerwie.

Źródło

2013-05-28 Terraflubb

to będzie działać i nie będzie wyłączyć wybór tekstów:

$(document).on('scroll', function() { 
    $(document).scrollLeft(0); 
});

Możesz dodać $(document).scrollTop(0); jeśli chcesz wyłączyć przewijanie w dół.

Oto jsFiddle

Źródło

2013-05-28 04:00:31

Dziękuję, to działało dla mnie. Dostaję dreszcz, kiedy zaczynam się przeciągać, ale przynajmniej ekran się nie zepsuł. – Terraflubb

Działa świetnie. Prosty i świetny w Firefoksie i Chrome. – kwoxer

Jeśli dobrze zrozumiałem twoje pytanie, powinno to zrobić.

http://jsfiddle.net/ax5x7/3/

prosimy mi powiedzieć więcej o tym problemie, a ja odpowiednio zaktualizować.

Usunąłem dopełnienie/margines na znaczniku body.

zaktualizowane biggestThing

wyglądać mniej więcej tak:

#biggestThing { 
    box-sizing: border-box; 
    border: 1px solid black; 
    width: 100%; 
    background-color: #eee; 
    height: 5em; 
}

Źródło

2013-05-28 03:29:11 lifeiscontent

Dzięki za odpowiedzi. Nie scharakteryzowałem cię, ale niestety nie mam luksusu dostosowywania formatowania dla wszystkich moich elementów.Mój przykład powyżej był destylowanym przykładem problemu, niestety aplikacja, o której mowa, jest bardziej złożona i nie byłabym w stanie wyśledzić wszystkich naruszających CSS, poprawić i zachować wygląd, z czasem na wysyłkę. – Terraflubb

Można spróbować, ale będzie przerwa wybór tekstów:

$('html, body').on("mousedown", null, function(event) { 
    return false; 
});

http://jsfiddle.net/samliew/ThCJf/

Źródło

2013-05-28 03:46:52

Trudno było zdecydować, którą odpowiedź przyjąć, chciałbym móc zaakceptować obie. Ten działa naprawdę dobrze, bez dreszczów, więc wygląda lepiej, ale wymaga ode mnie przejścia przez moją aplikację, aby upewnić się, że nic nie zepsuło z boku. FWIW, będę to robił. Dziękuję Ci. – Terraflubb

o ile nie korzystasz z funkcji mousedown na żadnym z elementów/przycisków i nie wymagasz w ogóle przewijania, powinieneś być w porządku. W przeciwnym razie możesz włączyć mousedown dla określonych elementów. –

Problem, na który natrafiłem, polegał na tym, że utraciłem możliwość ustawiania ostrości na niektórych polach wprowadzania tekstu. Mógłbym je umieścić na białej liście, ale ponieważ to i tak wymagałoby polowania, aby zobaczyć, co jeszcze się złamałem, po prostu ugryzłem kulę i trzymałem mój niezgrabny absolutny div w dokumencie. – Terraflubb

Spróbuj dodać overflow:hidden; w css z page_wrapper.

Źródło

2014-05-30 10:02:28 isxaker

Dla czystego realizacji JS, który daje mi żadnej dreszcz na Chrome, co najmniej:

function preventScroll(){ 
    var element = document.getElementById('my-element-id'); 
    element.onscroll = function(){ 
     element.scrollLeft = 0; 
    }; 
}

Źródło

2015-10-13 16:15:04 SethWhite

Jak zapobiec przewijaniu ekranu po przeciągnięciu myszą, gdy element pozycjonowany absolutnie jest (częściowo) wyłączony z ekranu?

Odpowiedz

Powiązane problemy