javascript - scrollheight - scroll jquery примеры




Как временно отключить прокрутку? (20)

Я использую плагин scrollTo jQuery и хотел бы знать, возможно ли временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хочу отключить прокрутку, заключается в том, что когда вы прокручиваете, когда scrollTo анимируется, это становится очень уродливым;)

Конечно, я мог бы сделать $("body").css("overflow", "hidden"); а затем верните его в авто, когда анимация остановится, но было бы лучше, если бы полоса прокрутки все еще была видимой, но неактивной.


Сохраняйте длину прокрутки в глобальной переменной и восстанавливайте ее при необходимости!

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);
}

В зависимости от того, что вы хотите достичь с помощью удаленной прокрутки, вы можете просто исправить элемент, из которого вы хотите удалить прокрутку (нажатие или любой другой триггер, который вы хотите временно отключить прокрутку)

Я искал решение «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 left к этому элементу, когда активный класс активен

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's only pushed from one side)
});

Вот мое решение, чтобы остановить свиток (нет 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>

Я положил 17px дополнения - право компенсировать исчезновение полосы прокрутки. Но это также проблематично, в основном для мобильных браузеров. Решается путем получения ширины полосы в соответствии с this .

Все вместе в этом Перо.


Вы можете заблокировать прокрутку пробела и скрыть панель прокрутки браузера:

$(document).keydown(function(event) {
    if (event.keyCode == 32) {
        return false;

    }
});

document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';

Как насчет этого? (Если вы используете 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() });
    }
};

Мне жаль отвечать на старый пост, но я искал решение и столкнулся с этим вопросом.

Существует много обходных решений для этой проблемы, чтобы по-прежнему отображать полосу прокрутки, например, предоставить контейнеру высоту 100% и стиль overflow-y: scroll .

В моем случае я просто создал div с полосой прокрутки, которую я показываю при добавлении overflow: hidden для тела:

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

Элемент scrollbar должен иметь следующие стили:

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

Это показывает серый полоса прокрутки, надеюсь, что это поможет будущим посетителям.


Основываясь на ответе Шайенна Форбса, и один из них я нашел здесь через fcalderan: просто отключите прокрутку, не скройте ее? и исправить проблему Hallodom о исчезновении полосы прокрутки

CSS:

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

Этот код переводит вас в начало страницы, но я думаю, что код fcalderan имеет обходное решение.


Отмена события как в принятом ответе - это ужасный метод, на мой взгляд: /

Вместо этого я использовал position: fixed; top: -scrollTop(); 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": ""});
    }
}

Этот код принимает, увеличивает ширину, высоту, полосу прокрутки и страницы.

Возможные проблемы, устраненные с помощью вышеуказанного кода:

  • ширина, при установке позиции фиксированная ширина элемента html может быть меньше 100%
  • высота, такая же, как указано выше
  • полоса прокрутки, когда фиксированная позиция фиксирована, содержимое страницы больше не имеет полосы прокрутки, даже если у нее была полоса прокрутки, прежде чем в результате появилась горизонтальная страничная строка
  • pagejump, когда фиксированная позиция фиксирована, scrollTop страницы больше не эффективен, что приводит к вертикальной перегрузке страницы

Если у кого есть какие-либо улучшения в отношении кода замораживания / размораживания страницы, сообщите мне, чтобы я мог добавить эти улучшения в свой проект.


Решение 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; };
}

Самый простой способ:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

Чтобы отменить это:

$("body").css("overflow", "auto");

Простота в использовании, но единственный недостаток:

  • Страница будет немного сдвигаться влево, если она выровнена по центру (по горизонтали).

Это происходит из-за удаления полосы прокрутки, а окно просмотра становится немного шире.


Следующим решением является простой, но чистый JavaScript (без 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);

Событие 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);
  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);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}

У меня была аналогичная проблема с анимацией на мобильных экранах, но не на ноутбуках, когда вы пытались анимировать div, используя команду animate jquery. Поэтому я решил использовать таймер, который так часто восстанавливал положение прокрутки окна, что невооруженным глазом документ выглядел бы статическим. Это решение отлично работало на мобильном устройстве с маленьким экраном, например Samsung Galaxy-2 или iphone-5.

Основная логика этого подхода : таймер, чтобы установить положение прокрутки окна в исходную позицию прокрутки, должен быть запущен до команды анимации jquery, а затем, когда анимация завершена, нам нужно очистить этот таймер ( 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() {};
});

У меня та же проблема, ниже - то, как я ее обрабатываю.

/* 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;
}

надеюсь эта помощь.


Что-то, что я только что собрал:

jsfiddle

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>


Это решение будет поддерживать текущую позицию прокрутки, в то время как прокрутка отключена, в отличие от некоторых, которые возвращают пользователя назад.

Он основан на ответе galambalazs , но с поддержкой сенсорных устройств и реорганизован как один объект с оболочкой jquery plugin.

Демо здесь.

На github здесь.

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

function enableScrolling(){
    window.onscroll=function(){};
}

Я беру на себя эту проблему, также вызывает беспокойство по поводу ширины тела, поскольку, похоже, эта страница немного танцует, когда мы скрываем полосу прокрутки с overflow = "hidden" . Следующий код отлично работает для меня и основан на угловом подходе.

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';
});

Я знаю, что это старый вопрос, но мне приходилось делать что-то очень похожее, и через некоторое время, когда я искал ответ и пытался использовать разные подходы, я в конечном итоге использовал очень простое решение.

Моя проблема была очень похожа, почти идентична, единственная разница в том, что мне не нужно было показывать полосу прокрутки - мне просто нужно было убедиться, что ее ширина все равно будет использоваться, поэтому ширина страницы не изменится, пока отображается моя оверлей ,

Когда я начинаю выдвигать свой оверлей на экран, я делаю:

$('body').addClass('stop-scrolling').css('margin-right', 8);

и после того, как я сдвигаю свой оверлей с экрана, я делаю:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

ВАЖНО: это отлично работает, потому что мой оверлей позиционируется как absolute , right: 0px когда он visible .


Я использую 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();
});

Я нашел этот ответ на другом site :

Отключить прокрутку:

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

После закрытия всплывающего окна прокрутки:

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});




scroll