Wyłącz elastyczne przewijanie w Safari [duplikat]
To pytanie ma już odpowiedź tutaj:
- iPad safari: wyłączenie przewijania i efekt odbicia? 12 odpowiedzi
Chciałem tylko zmienić efekt elastycznego przewijania / odbijania W Safari (OSX Lion).
Znalazłem rozwiązanie, aby ustawić overflow: hidden dla body w css, ale zgodnie z oczekiwaniami to tylko wyłącza scrollbar, więc jeśli strona jest "dłuższy" niż ekran, którego nie będziesz mógł przewijać!
Wszelkie rozwiązania lub wskazówki są mile widziane! Dzięki!
9 answers
Możesz to osiągnąć bardziej uniwersalnie, stosując następujący CSS:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
Pozwala to na przewijanie zawartości w body, ale należy pamiętać, że kontekstem przewijania, w którym wywołane jest Zdarzenie scroll, jest teraz document.body, a nie window.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-11 17:29:17
Jeśli użyjesz overflow:hidden hack na elemencie <body>, aby przywrócić normalne zachowanie przewijania, możesz umieścić <div> absolutnie wewnątrz elementu, aby uzyskać przewijanie z powrotem za pomocą overflow:auto. Myślę, że jest to najlepsza opcja i jest dość łatwa do wdrożenia przy użyciu tylko css!
Lub, możesz spróbować z jQuery:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
To samo w javasrcipt:
document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);
Ostatnia opcja, zaznacz iPad safari: wyłącz przewijanie i efekt odbicia?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:17:56
overflow:hidden;-webkit-overflow-scrolling:touch nie będzie działać dobrze na iOS safari 8.1, ponieważ stały nagłówek będzie poza widocznym obszarem.
Jak mówi @Yisela, css powinien być umieszczony na .container (<div> poniżej <body>). co wydaje się nie problemem (przynajmniej na safari iOS 8.1)
Umieściłem demo na moim blogu: http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-08 15:04:36
Zrobiłem rozszerzenie, aby wyłączyć go na wszystkich stronach. W tym celu użyłem trzech technik: pure CSS, pure JS i hybrid.
Wersja CSS jest podobna do powyższych rozwiązań. Js one idzie trochę tak:
var scroll = function(e) {
// compute state
if (stopScrollX || stopScrollY) {
e.preventDefault(); // this one is the key
e.stopPropagation();
window.scroll(scrollToX, scrollToY);
}
}
document.addEventListener('mousewheel', scroll, false);
CSS działa, gdy używa się position: fixed elements i pozwala przeglądarce na przewijanie. JS jeden jest potrzebny, gdy inne JS zależy od okna (np events), który zostanie zablokowany przez poprzedni CSS (ponieważ sprawia, że ciało przewija zamiast okno) i działa poprzez zatrzymanie propagacji zdarzeń na krawędziach, ale musi zsyntetyzować przewijanie komponentu nie-krawędziowego; minusem jest to, że zapobiega to niektórym rodzajom przewijania (te działają z CSS). Hybrydowy próbuje przyjąć mieszane podejście, selektywnie wyłączając kierunkowe przepełnienie (CSS), gdy przewijanie osiąga krawędź (JS), i teoretycznie może działać w obu przypadkach, ale nie całkiem obecnie, ponieważ ma pewną swobodę na granicy.
Więc w zależności od wdrożenia własnej strony internetowej, trzeba albo przyjąć jedno podejście, albo drugie.
Zobacz tutaj, jeśli ktoś chce więcej szczegółów: https://github.com/lloeki/unelastic
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-28 15:31:37
Żadne z rozwiązań "przepełnienia" nie działało dla mnie. Koduję efekt paralaksy za pomocą JavaScript przy użyciu jQuery. W Chrome i Safari na OSX efekt elastycznej / gumowej opaski był brudząc moje numery przewijania, ponieważ faktycznie przewija się obok wysokości dokumentu i aktualizuje zmienne okna z liczbami poza granicami. To, co musiałem zrobić, to sprawdzić, czy przewinięta kwota jest większa niż rzeczywista wysokość dokumentu, w ten sposób:
$(window).scroll(
function() {
if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
updateScroll(); // my own function to do my parallaxing stuff
}
);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-07 06:40:10
Możesz sprawdzić, czy przesunięcia przewijania są w granicach. Jeśli pójdą dalej, odstaw ich z powrotem.
var scrollX = 0;
var scrollY = 0;
var scrollMinX = 0;
var scrollMinY = 0;
var scrollMaxX = document.body.scrollWidth - window.innerWidth;
var scrollMaxY = document.body.scrollHeight - window.innerHeight;
// make sure that we work with the correct dimensions
window.addEventListener('resize', function () {
scrollMaxX = document.body.scrollWidth - window.innerWidth;
scrollMaxY = document.body.scrollHeight - window.innerHeight;
}, false);
// where the magic happens
window.addEventListener('scroll', function () {
scrollX = window.scrollX;
scrollY = window.scrollY;
if (scrollX <= scrollMinX) scrollTo(scrollMinX, window.scrollY);
if (scrollX >= scrollMaxX) scrollTo(scrollMaxX, window.scrollY);
if (scrollY <= scrollMinY) scrollTo(window.scrollX, scrollMinY);
if (scrollY >= scrollMaxY) scrollTo(window.scrollX, scrollMaxY);
}, false);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-23 09:04:36
Żadne z powyższych rozwiązań nie zadziałało dla mnie, jednak zamiast tego owinąłem moją treść w div (#outer-wrap), a następnie użyłem następującego CSS:
body {
overflow: hidden;
}
#outer-wrap {
-webkit-overflow-scrolling: touch;
height: 100vh;
overflow: auto;
}
Oczywiście działa tylko w przeglądarkach, które oczywiście obsługują szerokość/wysokość viewportu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-09 03:24:52
Rozwiązałem to na iPadzie. Spróbuj, jeśli działa również na OSX.
body, html { position: fixed; }
Działa tylko wtedy, gdy masz zawartość mniejszą niż ekran lub używasz jakiegoś frameworka układu (Angular Material w moim przypadku).
W kanciastym materiale świetnie, że wyłączysz efekt over-scroll całej strony, ale wewnętrzne sekcje <md-content> mogą być nadal przewijalne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-12 14:21:49
Są sytuacje, w których powyższe rozwiązania CSS nie działają. Na przykład przezroczysty stały nagłówek i lepka stopka na tej samej stronie. Aby zapobiec top bounce w safari brudząc rzeczy i powodując błyski na suwakach pełnoekranowych, Możesz tego użyć.
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
$window.bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
if ($window.scrollTop() < 2) return false;
}
});
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-03 19:56:44