Wie kann man den Bildlauf vorübergehend deaktivieren?

Question

Ich benutze das scrollTo jQuery-Plugin und würde gerne wissen, ob es irgendwie möglich ist, das Scrollen auf dem Fenster-Element durch Javascript vorübergehend zu deaktivieren? Der Grund, warum ich das Scrollen deaktivieren möchte, ist, dass, wenn Sie scrollen, während scrollTo animiert wird, wird es wirklich hässlich ;)

Natürlich könnte ich eine $("body").css("overflow", "hidden"); und dann wieder auf Auto stellen, wenn die Animation aufhört, aber es wäre besser, wenn die Bildlaufleiste weiterhin sichtbar, aber inaktiv wäre.

Answer 1

El scroll Veranstaltung kann nicht abgesagt werden. Aber Sie können es tun, indem Sie abzubrechen. diese Interaktionsereignisse:
Maus & Berühren Sie den Bildlauf y Buttons in Verbindung mit dem Blättern.

[ Arbeitsfähige Demo ]

// 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.preventDefault();
}

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; } 
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

UPDATE: Chrome-Desktop und moderne mobile Browser mit passiven Zuhörern repariert

Answer 2

Fügen Sie dazu einfach eine Klasse in den Textkörper ein:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

Fügen Sie die Klasse hinzu und entfernen Sie sie, wenn Sie den Bildlauf wieder aktivieren wollen. Getestet in IE, FF, Safari und Chrome.

$('body').addClass('stop-scrolling')

---

Para mobile Geräte müssen Sie mit der touchmove Veranstaltung:

$('body').bind('touchmove', function(e){e.preventDefault()})

Und lösen Sie die Bindung, um den Bildlauf wieder zu aktivieren. Getestet in iOS6 und Android 2.3.3

$('body').unbind('touchmove')

Answer 3

Hier ist eine sehr einfache Methode, dies zu tun:

window.onscroll = function () { window.scrollTo(0, 0); };

Im IE6 ist es etwas ruckelig.

Answer 4

Die folgende Lösung ist einfach, aber reines JavaScript (kein jQuery):

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

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

Answer 5

Es tut mir leid, auf einen alten Beitrag zu antworten, aber ich habe nach einer Lösung gesucht und bin auf diese Frage gestoßen.

Es gibt viele Umgehungsmöglichkeiten für dieses Problem, um die Bildlaufleiste trotzdem anzuzeigen, z.B. indem man dem Container eine Höhe von 100% und eine overflow-y: scroll Styling.

In meinem Fall habe ich einfach ein Div mit einer Bildlaufleiste erstellt, die ich beim Hinzufügen von overflow: hidden zum Körper:

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

Das Element scrollbar muss diesen Stil haben:

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

Dies zeigt eine graue Bildlaufleiste, ich hoffe, es hilft zukünftigen Besuchern.