Я использую плагин scrollTo jQuery и хотел бы знать, возможно ли временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хочу отключить прокрутку, заключается в том, что при прокрутке во время анимации scrollTo это становится очень уродливым;)
Конечно, я мог бы сделать $("body").css("overflow", "hidden");, а затем вернуть его к авто, когда анимация остановится, но было бы лучше, если полоса прокрутки все еще была видна, но неактивна.
Событие scroll не может быть отменено. Но вы можете сделать это, отменив эти события взаимодействия:
Мышь и сенсорная прокрутка и кнопки, связанные с прокруткой.
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
document.removeEventListener('wheel', preventDefault, {passive: false}); // Enable scrolling in Chrome
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
РЕДАКТИРОВАТЬ
Добавлен document.addEventListener('wheel', preventDefault, {passive: false}); чтобы гарантировать, что функция все еще работает на Chrome.
Сделайте это просто, добавив класс в тело:
.stop-scrolling {
height: 100%;
overflow: hidden;
}
Добавьте класс, затем удалите, когда вы хотите снова включить прокрутку, протестированную в IE, FF, Safari и Chrome.
$('body').addClass('stop-scrolling')
Для мобильных устройств вам необходимо обработать событие touchmove:
$('body').bind('touchmove', function(e){e.preventDefault()})
И отвяжите, чтобы снова включить прокрутку. Протестировано в iOS6 и Android 2.3.3.
$('body').unbind('touchmove')
Вот действительно простой способ сделать это:
window.onscroll = function () { window.scrollTo(0, 0); };
Это как-то странно в IE6.
Следующее решение - базовый, но чистый JavaScript (без jQuery):
function disableScrolling(){
var x=window.scrollX;
var y=window.scrollY;
window.onscroll=function(){window.scrollTo(x, y);};
}
function enableScrolling(){
window.onscroll=function(){};
}
Это решение будет поддерживать текущую позицию прокрутки, пока прокрутка отключена, в отличие от некоторых, которые перескакивают пользователя назад.
Он основан на ответе galambalazs, но с поддержкой сенсорных устройств и реорганизован как один объект с помощью оболочки плагина jquery.
/**
* $.disablescroll
* Author: Josh Harrison - aloof.co
*
* Disables scroll events from mousewheels, touchmoves and keypresses.
* Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
*/
;(function($) {
"use strict";
var instance, proto;
function UserScrollDisabler($container, options) {
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
// left: 37, up: 38, right: 39, down: 40
this.opts = $.extend({
handleKeys : true,
scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
}, options);
this.$container = $container;
this.$document = $(document);
this.lockToScrollPos = [0, 0];
this.disable();
}
proto = UserScrollDisabler.prototype;
proto.disable = function() {
var t = this;
t.lockToScrollPos = [
t.$container.scrollLeft(),
t.$container.scrollTop()
];
t.$container.on(
"mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
t._handleWheel
);
t.$container.on("scroll.disablescroll", function() {
t._handleScrollbar.call(t);
});
if(t.opts.handleKeys) {
t.$document.on("keydown.disablescroll", function(event) {
t._handleKeydown.call(t, event);
});
}
};
proto.undo = function() {
var t = this;
t.$container.off(".disablescroll");
if(t.opts.handleKeys) {
t.$document.off(".disablescroll");
}
};
proto._handleWheel = function(event) {
event.preventDefault();
};
proto._handleScrollbar = function() {
this.$container.scrollLeft(this.lockToScrollPos[0]);
this.$container.scrollTop(this.lockToScrollPos[1]);
};
proto._handleKeydown = function(event) {
for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
if (event.keyCode === this.opts.scrollEventKeys[i]) {
event.preventDefault();
return;
}
}
};
// Plugin wrapper for object
$.fn.disablescroll = function(method) {
// If calling for the first time, instantiate the object and save
// reference. The plugin can therefore only be instantiated once per
// page. You can pass options object in through the method parameter.
if( ! instance && (typeof method === "object" || ! method)) {
instance = new UserScrollDisabler(this, method);
}
// Instance already created, and a method is being explicitly called,
// e.g. .disablescroll('undo');
else if(instance && instance[method]) {
instance[method].call(instance);
}
};
// Global access
window.UserScrollDisabler = UserScrollDisabler;
})(jQuery);
Мне жаль отвечать на старый пост, но я искал решение и наткнулся на этот вопрос.
Существует много обходных решений для этой проблемы, чтобы по-прежнему отображать полосу прокрутки, например, предоставить контейнеру высоту 100% и стиль overflow-y: scroll.
В моем случае я просто создал div с полосой прокрутки, которую я показываю при добавлении overflow: hidden к телу:
function disableScroll() {
document.getElementById('scrollbar').style.display = 'block';
document.body.style.overflow = 'hidden';
}
Полоса прокрутки элемента должна иметь следующие стили:
overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;
Здесь отображается серая полоса прокрутки, надеюсь, что она поможет будущим посетителям.
Я искал решение этой проблемы, но не был удовлетворен каким-либо из вышеперечисленных решений (как написать этот ответ), поэтому я придумал это решение.
CSS
.scrollDisabled {
position: fixed;
margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
width: 100%;
}
JS
var y_offsetWhenScrollDisabled=0;
function disableScrollOnBody(){
y_offsetWhenScrollDisabled= $(window).scrollTop();
$('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
$('body').removeClass('scrollDisabled').css('margin-top', 0);
$(window).scrollTop(y_offsetWhenScrollDisabled);
}
По сообщению galambalazs я бы добавил поддержку сенсорных устройств, позволяя нам касаться, но не прокручивать вверх или вниз:
function disable_scroll() {
...
document.ontouchmove = function(e){
e.preventDefault();
}
}
function enable_scroll() {
...
document.ontouchmove = function(e){
return true;
}
}
Начиная с Chrome 56 и других современных браузеров, вы должны добавить passive:false в вызов addEventListener, чтобы сделать работу preventDefault. Поэтому я использую это, чтобы остановить прокрутку на мобильном устройстве:
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}
Другое решение:
body {
overflow-y: scroll;
width: 100%;
margin: 0 auto;
}
Таким образом, у вас всегда есть вертикальная полоса прокрутки, но поскольку большая часть моего контента больше, чем область просмотра, это нормально для меня. Содержимое сосредоточено с отдельным div, но без изменения поля снова в теле мой контент останется слева.
Это две функции, которые я использую для показа всплывающих/модальных:
var popup_bodyTop = 0;
var popup_bodyLeft = 0;
function popupShow(id)
{
$('#'+ id).effect('fade');
$('#popup-overlay').effect('fade');
// remember current scroll-position
// because when setting/unsetting position: fixed to body
// the body would scroll to 0,0
popup_bodyLeft = $(document).scrollLeft();
popup_bodyTop = $(document).scrollTop();
// invert position
var x = - popup_bodyLeft;
var y = - popup_bodyTop;
$('body').css('position', 'fixed');
$('body').css('top', y.toString() +'px');
$('body').css('left', x.toString() +'px');
}
function popupHide(id)
{
$('#'+ id).effect('fade');
$('#popup-overlay').effect('fade');
$('body').css('position', '');
$('html, body').scrollTop(popup_bodyTop);
$('html, body').scrollLeft(popup_bodyLeft);
}
Результат: незапрограммируемый фон и отсутствие повторного позиционирования содержимого из-за левой полосы прокрутки. Протестировано с текущими FF, Chrome и IE 10.
Как насчет этого? (Если вы используете jQuery)
var $window = $(window);
var $body = $(window.document.body);
window.onscroll = function() {
var overlay = $body.children(".ui-widget-overlay").first();
// Check if the overlay is visible and restore the previous scroll state
if (overlay.is(":visible")) {
var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
window.scrollTo(scrollPos.x, scrollPos.y);
}
else {
// Just store the scroll state
$body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
}
};
В зависимости от того, что вы хотите достичь с помощью удаленной прокрутки, вы можете просто исправить элемент, из которого вы хотите удалить прокрутку (нажатие или любой другой триггер, который вы хотите временно отключить прокрутку)
Я искал решение "temp no scroll" и для своих нужд, это решило его
создать класс
.fixed{
position: fixed;
}
затем с помощью JQuery
var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from
contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class
//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){
if(contentContainer.hasClass('notfixed')){
contentContainer.removeClass('notfixed').addClass('fixed');
}else if(contentContainer.hasClass('fixed')){
contentContainer.removeClass('fixed').addClass('notfixed');
};
});
Я обнаружил, что это достаточно простое решение, которое хорошо работает во всех браузерах, а также упрощает его использование на портативных устройствах (например, iPhone, планшеты и т.д.). Поскольку элемент временно фиксирован, прокрутки нет:)
ВНИМАНИЕ! В зависимости от размещения вашего элемента contentContainer вам может понадобиться отрегулировать его слева. Это легко сделать, добавив левое значение css в этот элемент, когда активный класс активен.
contentContainer.css({
'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it only pushed from one side)
});
Я использую showModalDialog, чтобы показать дополнительную страницу как модальный диалог.
чтобы скрыть полосы прокрутки главного окна:
document.body.style.overflow = "hidden";
и при закрытии модального диалога, показывающего полосы прокрутки основного окна:
document.body.style.overflow = "scroll";
для доступа к элементам в главном окне из диалогового окна:
parent.document.getElementById('dialog-close').click();
для любого, кто ищет showModalDialog:( после строки 29 исходного кода)
document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
e.preventDefault();
document.body.style.overflow = "scroll";//****
dialog.close();
});
Нет, я бы не стал заниматься обработкой событий, потому что:
не все события гарантированно достигают тела,
выделение текста и перемещение вниз фактически прокручивает документ,
если на этапе события отсоединение что-то пошло не так, вы обречены.
Я укусил это, сделав действие копирования-вставки со скрытой текстовой областью, и угадайте, что прокручивает страницу всякий раз, когда я делаю копию, потому что внутренне я должен выбрать текстовую область, прежде чем я вызову document.execCommand('copy').
Как бы то ни было, обратите внимание на setTimeout():
document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);
Мигает импульс, поскольку полосы прокрутки на мгновение исчезают, но это приемлемо.
Отмена события, как в принятом ответе, является на мой взгляд ужасным методом:/
Вместо этого я использовал position: fixed; top: -scrollTop(); ниже.
Демо: https://jsfiddle.net/w9w9hthy/5/
Из моего всплывающего проекта jQuery: https://github.com/seahorsepip/jPopup
//Freeze page content scrolling
function 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": "fixed", "top": -top});
}
}
//Unfreeze page content scrolling
function unfreeze() {
if($("html").css("position") == "fixed") {
$("html").css("position", "static");
$("html, body").scrollTop(-parseInt($("html").css("top")));
$("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
}
}
Этот код принимает, ширину, высоту, полосу прокрутки и проблемы со списком страниц.
Возможные проблемы, устраненные с помощью приведенного выше кода:
Если у кого есть какие-либо улучшения в коде для замораживания/размораживания страницы, сообщите мне, чтобы я мог добавить эти улучшения в свой проект.
Я знаю, что это старый вопрос, но мне приходилось делать что-то очень похожее, и через некоторое время, когда я искал ответ и пытался использовать разные подходы, я в конечном итоге использовал очень простое решение.
Моя проблема была очень похожей, почти идентичной, единственная разница в том, что мне не нужно было показывать полосу прокрутки - мне просто нужно было убедиться, что ее ширина все равно будет использоваться, поэтому ширина страницы не изменится, пока моя отображается оверлей.
Когда я начинаю перемещать свой оверлей на экран, я делаю:
$('body').addClass('stop-scrolling').css('margin-right', 8);
и после того, как я сдвигаю свой оверлей с экрана, я делаю:
$('body').removeClass('stop-scrolling').css('margin-right', 0);
ВАЖНО: это отлично работает, потому что мой оверлей расположен absolute, right: 0px, когда visible.
Основываясь на ответе Шайенна Форбса, и один из них я нашел здесь через fcalderan: Просто отключить прокрутку, не скрывая его? и исправить проблему Hallodom прокрутки полосы прокрутки
CSS
.preventscroll{
position: fixed;
overflow-y:scroll;
}
JS:
whatever.onclick = function(){
$('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
$('body').removeClass('preventscroll');
}
Этот код переводит вас в начало страницы, но я думаю, что код fcalderan имеет обходное решение.
У меня та же проблема, ниже - то, как я ее обрабатываю.
/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");
/* file.css */
.no-scroll{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
надеюсь эта помощь.
Самый простой способ:
$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily
Чтобы отменить это:
$("body").css("overflow", "auto");
Простота в использовании, но единственный недостаток:
Это происходит из-за удаления полосы прокрутки, а окно просмотра становится немного шире.
Вот мое решение, чтобы остановить свиток (нет jQuery). Я использую его для отключения прокрутки, когда появляется боковое меню.
<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
if(noscroll_var){
document.getElementsByTagName("html")[0].style.overflowY = "";
document.body.style.paddingRight = "0";
noscroll_var = false
}else{
document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
document.body.style.paddingRight = "17px";
noscroll_var = true
}
}/*noscroll()*/
</script>
<!-- Just to fill the page -->
<script>
for(var i=0; i <= 80; i++){
document.write(i + "<hr>")
}
</script>Это самое простое решение, которое я получил до сих пор. И поверьте мне, я попробовал всех остальных, и это самый простой. Он отлично работает на устройствах Windows, которые подталкивают страницу справа, чтобы иметь место для системной полосы прокрутки и устройств IOS, которые не требуют места для своих полос прокрутки в браузерах. Поэтому, используя это, вам не нужно добавлять прописку справа, чтобы страница не мерцала, когда вы скрываете переполнение тела или html с помощью css.
Решение довольно просто, если вы думаете об этом. Идея состоит в том, чтобы дать window.scrollTop() ту же самую точную позицию в тот момент, когда всплывающее окно открыто. Также измените эту позицию, когда размер окна изменится (когда положение прокрутки изменится после того, как это произойдет).
Итак, мы идем...
Сначала давайте создадим переменную, которая сообщит вам, что всплывающее окно открыто и вызывает его stopWindowScroll. Если мы этого не сделаем, вы получите ошибку неопределенной переменной на своей странице и установите ее в 0 - как неактивную.
$(document).ready(function(){
stopWindowScroll = 0;
});
Теперь давайте сделаем открытую всплывающую функцию, которая может быть любой функцией вашего кода, которая запускает любое всплывающее окно, которое вы используете в качестве плагина или обычая. В этом случае это будет простое пользовательское всплывающее окно с простым документом в функции щелчка.
$(document).on('click','.open-popup', function(){
// Saving the scroll position once opening the popup.
stopWindowScrollPosition = $(window).scrollTop();
// Setting the stopWindowScroll to 1 to know the popup is open.
stopWindowScroll = 1;
// Displaying your popup.
$('.your-popup').fadeIn(300);
});
Итак, следующая вещь, которую мы делаем, это создать функцию всплывающего окна, которую я повторяю снова, может быть любой функцией, которую вы уже создали или используете в плагине. Важно то, что нам нужны эти 2 функции, чтобы установить переменную stopWindowScroll в 1 или 0, чтобы знать, когда она открывается или закрывается.
$(document).on('click','.open-popup', function(){
// Setting the stopWindowScroll to 0 to know the popup is closed.
stopWindowScroll = 0;
// Hiding your popup
$('.your-popup').fadeOut(300);
});
Затем давайте создадим функцию window.scroll, чтобы мы могли предотвратить прокрутку, как только stopWindowScroll, упомянутый выше, установлен в 1 - как активный.
$(window).scroll(function(){
if(stopWindowScroll == 1) {
// Giving the window scrollTop() function the position on which
// the popup was opened, this way it will stay in its place.
$(window).scrollTop(stopWindowScrollPosition);
}
});
Это оно. Для этого не требуется CSS, кроме ваших собственных стилей для страницы. Это работало как прелесть для меня, и я надеюсь, что это поможет вам и другим.
Вот рабочий пример JSFiddle:
Дайте мне знать, если это поможет. С уважением.
Сохраняйте длину прокрутки в глобальной переменной и восстанавливайте ее при необходимости!
var sctollTop_length = 0;
function scroll_pause(){
sctollTop_length = $(window).scrollTop();
$("body").css("overflow", "hidden");
}
function scroll_resume(){
$("body").css("overflow", "auto");
$(window).scrollTop(sctollTop_length);
}
Этот код будет работать на Chrome 56 и более поздних версиях (оригинальный ответ больше не работает на Chrome).
Используйте DomUtils.enableScroll() чтобы включить прокрутку.
Используйте DomUtils.disableScroll() чтобы отключить прокрутку.
class DomUtils {
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };
static preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
static preventDefaultForScrollKeys(e) {
if (DomUtils.keys[e.keyCode]) {
DomUtils.preventDefault(e);
return false;
}
}
static disableScroll() {
document.addEventListener('wheel', DomUtils.preventDefault, {
passive: false,
}); // Disable scrolling in Chrome
document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
passive: false,
});
}
static enableScroll() {
document.removeEventListener('wheel', DomUtils.preventDefault, {
passive: false,
}); // Enable scrolling in Chrome
document.removeEventListener(
'keydown',
DomUtils.preventDefaultForScrollKeys,
{
passive: false,
}
); // Enable scrolling in Chrome
}
}
Я нашел этот ответ на другом сайте:
Отключить прокрутку:
$( ".popup").live({
popupbeforeposition: function(event, ui) {
$("body").on("touchmove", false);
}
});
После закрытия всплывающего окна прокрутки:
$( ".popup" ).live({
popupafterclose: function(event, ui) {
$("body").unbind("touchmove");
}
});
Вы можете заблокировать прокрутку пробела и скрыть панель прокрутки браузера:
$(document).keydown(function(event) {
if (event.keyCode == 32) {
return false;
}
});
document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';
Решение galambalazs отлично! Он отлично работал у меня как в Chrome, так и в Firefox. И он также может быть расширен для предотвращения любого события по умолчанию из окна браузера. Скажем, вы делаете приложение на холсте. Вы можете сделать это:
var events = {
preventDefault: function(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
},
//spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
//left: 37, up: 38, right: 39, down: 40
keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
keydown: function(e) {
for (var i = events.keys.length; i--;) {
if (e.keyCode === events.keys[i]) {
events.preventDefault(e);
return;
}
}
},
wheel: function(e) {
events.preventDefault(e);
},
disable: function() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', events.wheel, false);
}
window.onmousewheel = document.onmousewheel = events.wheel;
document.onkeydown = helpers.events.keydown;
},
enable: function() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', events.wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
}
И затем в приложении скажите, что вы собираетесь обрабатывать свои собственные события, такие как мышь, клавиатура, события касания и т.д. Вы можете отключить события по умолчанию, когда мышь заходит внутрь холста и снова активирует их когда мышь гаснет:
function setMouseEvents(canvas) {
var useCapture = false;
//Mouse enter event
canvas.addEventListener('mouseenter', function(event) {
events.disable();
}, useCapture);
//Mouse leave event
canvas.addEventListener('mouseleave', function(event) {
events.enable();
}, useCapture);
}
Вы можете даже отключить контекстное меню с помощью этого хака:
function disableRightClickMenu(canvas) {
var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "white");
my_gradient.addColorStop(1, "white");
canvas.context.fillStyle = my_gradient;
canvas.context.fillRect(0, 0, canvas.width, canvas.height);
canvas.oncontextmenu = function() { return false; };
}
У меня была аналогичная проблема с анимацией на мобильных экранах, но не на ноутбуках, когда вы пытались анимировать div, используя команду jquery animate. Поэтому я решил использовать таймер, который так часто восстанавливал положение прокрутки окна, что невооруженным глазом документ выглядел бы статическим. Это решение отлично работало на мобильном устройстве с маленьким экраном, например Samsung Galaxy-2 или iphone-5.
Основная логика этого подхода. Таймер, чтобы установить положение прокрутки окна в исходную позицию прокрутки, должен быть запущен перед командой jquery animate, а затем, когда анимация завершена, нам нужно очистить этот таймер (original scroll position - это позиция перед началом анимации).
Я с удивлением обнаружил, что документ на самом деле оказался статичным во время продолжительности анимации, если интервал таймера был 1 millisecond, к чему я стремился.
//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
window.scrollTo(xPosition, yPosition);
}, 1);
//animate the element emt
emt.animate({
left: "toggle",
top: "toggle",
width: "toggle",
height: "toggle"
}, 500, function() {
//when animation completes, we stop the timer
clearInterval(restoreTimer);
});
ДРУГОЕ РЕШЕНИЕ, с которыми работал. На основании ответа Мохаммада Анини в этом сообщении для включения/отключения прокрутки я также обнаружил, что работала модифицированная версия кода, как показано ниже.
//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;
//disable scrolling
window.onscroll = function() {
window.scrollTo(xPosition, yPosition);
};
//animate and enable scrolling when animation is completed
emt.animate({
left: "toggle",
top: "toggle",
width: "toggle",
height: "toggle"
}, 500, function() {
//enable scrolling when animation is done
window.onscroll = function() {};
});
Моя проблема в этом вопросе также включает в себя проблему с шириной тела, поскольку, похоже, эта страница немного танцует, когда мы скрываем полосу прокрутки с помощью overflow = "hidden".
Следующий код отлично работает для меня и основан на подходе Angular.
element.bind('mouseenter', function() {
var w = document.body.offsetWidth;
document.body.style.overflow = 'hidden';
document.body.style.width = w + 'px';
});
element.bind('mouseleave', function() {
document.body.style.overflow = 'initial';
document.body.style.width = 'auto';
});
Простое решение, которое работало для меня (временно отключив прокрутку окна).
На основе этой скрипты: http://jsfiddle.net/dh834zgw/1/
следующий фрагмент (с использованием jquery) отключит прокрутку окна:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');
И в вашем css:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}
Теперь, когда вы удаляете модальный, не забудьте удалить класс noscroll в теге html:
$('html').toggleClass('noscroll');
Что-то, что я только что собрал:
document.onwheel = function(e) {
// get the target element
target = e.target;
// the target element might be the children of the scrollable element
// e.g., "li"s inside an "ul", "p"s inside a "div" etc.
// we need to get the parent element and check if it is scrollable
// if the parent isn't scrollable, we move up to the next parent
while (target.scrollHeight <= target.clientHeight) {
// while looping parents, we'll eventually reach document.body
// since body doesn't have a parent, we need to exit the while loop
if (target == document.body) {
break;
}
target = target.parentElement;
}
// we want this behaviour on elements other than the body
if (target != document.body) {
// if the scrollbar is at the top and yet if it still tries to scroll up
// we prevent the scrolling
if (target.scrollTop <= 0 && e.deltaY < 0) {
e.preventDefault();
}
// similarly, if the scrollbar is at the bottom and it still tries to scroll down
// we prevent it
else if (target.clientHeight + target.scrollTop >= target.scrollHeight && e.deltaY > 0) {
e.preventDefault();
}
}
};body {
background: gainsboro;
}
#box {
width: 300px;
height: 600px;
padding: 5px;
border: 1px solid silver;
margin: 50px auto;
background: white;
overflow: auto;
}<div id="box">
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>