Я просто хотел сменить эффект упругой прокрутки/отскока в Safari (OSX Lion).
Я нашел решение установить overflow: hidden для тела в css, но, как и ожидалось, только отключает полосу прокрутки, поэтому, если сайт "длиннее", чем экран, вы не сможете для прокрутки!
Любые решения или подсказки приветствуются! Спасибо!
Вы можете добиться этого более универсально, применяя следующий CSS:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
Это позволяет вашему контенту, независимо от его количества, прокручиваться в body, но имейте в виду, что контекст прокрутки, где выполняется событие scroll, теперь document.body, а не window.
Если вы используете тэг overflow:hidden в элементе <body>, чтобы вернуться к нормальному прокручиванию, вы можете полностью позиционировать <div> внутри элемента, чтобы получить прокрутку с помощью overflow:auto. Я думаю, что это лучший вариант, и его довольно просто реализовать, используя только css!
Или вы можете попробовать с помощью jQuery:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
То же самое в javasrcipt:
document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);
Последний вариант, проверьте ipad safari: отключить прокрутку и эффект отскока?
overflow:hidden;-webkit-overflow-scrolling:touch не будет работать на сафари 8.1 для iOS, поскольку фиксированный заголовок окажется вне видимой области.
Как говорит @Yisela, css следует поместить на .container (<div> ниже <body>). который, кажется, не проблема (в лизинг на сафари iOS 8.1)
Я разместил демо в своем блоге: http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari
Я сделал расширение, чтобы отключить его на всех сайтах. При этом я использовал три метода: чистый CSS, чистый JS и гибрид.
Версия CSS похожа на приведенные выше решения. JS выглядит примерно так:
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 работает, когда вы используете позицию: фиксированные элементы и пусть браузер выполняет прокрутку. JS необходим, когда какой-либо другой JS зависит от окна (например, события), который блокируется предыдущим CSS (поскольку он заставляет тело прокручиваться вместо окна) и работает, останавливая распространение событий по краям, но нуждается в синтезировать прокрутку компонента без края; Недостатком является то, что он предотвращает некоторые типы прокрутки (они работают с одним CSS). Гибрид пытается использовать смешанный подход, выборочно отключая направленное переполнение (CSS), когда прокрутка достигает края (JS), и теоретически может работать в обоих случаях, но не совсем в настоящее время, поскольку она имеет некоторый запас на пределе.
Таким образом, в зависимости от реализаций одного веб-сайта нужно либо взять один подход, либо другой.
Смотрите здесь, если хотите получить более подробную информацию: https://github.com/lloeki/unelastic
Ни один из "переполненных" решений не работал у меня. Я кодирую эффект параллакса с помощью JavaScript с помощью jQuery. В Chrome и Safari на OSX эффект эластичных/резиновых полос испортил мои номера прокрутки, поскольку он фактически прокручивается за высоту документа и обновляет переменные окна с номерами вне границ. Я должен был проверить, было ли прокручиваемое количество больше фактической высоты документа, например:
$(window).scroll(
function() {
if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
updateScroll(); // my own function to do my parallaxing stuff
}
);
Вы можете проверить, находятся ли смещения прокрутки в границах. Если они выйдут за пределы, верните их.
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);
Ни один из вышеперечисленных решений не работал у меня, однако вместо этого я завернул свой контент в div (# external-wrap), а затем использовал следующий CSS:
body {
overflow: hidden;
}
#outer-wrap {
-webkit-overflow-scrolling: touch;
height: 100vh;
overflow: auto;
}
Очевидно, что он работает только в браузерах, которые поддерживают ширину/высоту видового экрана.
Я решил это на iPad. Попробуйте, если он работает и на OSX.
body, html { position: fixed; }
Работает только в том случае, если у вас есть контент меньший, чем экран, или вы используете некоторую структуру макета (Angular Материал в моем случае).
В Angular Материал отлично, что вы отключите эффект прокрутки всей страницы, но внутренние разделы <md-content> могут оставаться прокручиваемыми.
Есть ситуации, когда вышеупомянутые решения CSS не работают. Например, прозрачный фиксированный заголовок и липкий нижний колонтитул на той же странице. Чтобы предотвратить скачок верхнего уровня в сафари, возиться с вещами и вызвать вспышки на ползунках полноэкранного режима, вы можете использовать это.
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;
}
});
}