web-dev-qa-db-de.com

So programmieren Sie das Seitenblättern mit jQuery programmatisch

Mit jQuery möchte ich das Scrollen des Körpers deaktivieren:

Meine Idee ist:

  1. body{ overflow: hidden;} einstellen 
  2. Erfassen Sie die aktuelle scrollTop();/scrollLeft() 
  3. Binden Sie an das Body-Scroll-Ereignis und setzen Sie scrollTop/scrollLeft auf den erfassten Wert.

Gibt es einen besseren Weg?


Aktualisieren:

Siehe mein Beispiel und einen Grund dafür unter http://jsbin.com/ikuma4/2/edit .

Mir ist bewusst, dass jemand denkt "Warum verwendet er nicht einfach position: fixed auf dem Panel?".

Bitte schlagen Sie das nicht vor, da ich andere Gründe habe.

145
Hailwood

Die einzige Möglichkeit, die ich gefunden habe, ist ähnlich zu dem, was Sie beschrieben haben:

  1. Aktuelle Scrollposition erfassen (horizontale Achse nicht vergessen!).
  2. Setzen Sie den Überlauf auf ausgeblendet (möchte den vorherigen Überlaufwert beibehalten).
  3. Dokument mit scrollTo () zur gespeicherten Bildlaufposition scrollen.

Wenn Sie bereit sind, das Blättern erneut zuzulassen, machen Sie das rückgängig.

Edit: kein Grund, warum ich dir den Code nicht geben kann, seit ich mir die Mühe gemacht habe, ihn zu graben.

// lock scroll position, but retain settings for later
var scrollPosition = [
  self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
  self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
125
tfe

Dadurch wird vollständig das Scrollen deaktiviert:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

Etwas wiederherstellen:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

Getestet auf Firefox und Chrome.

204
gitaarik

versuche dies

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})
44
cubbiu

sie können diesen Code verwenden:

$("body").css("overflow", "hidden");
26
mr.soroush

Ich habe nur eine kleine Anpassung an die Lösung von tfe vorgenommen. Insbesondere habe ich ein zusätzliches Steuerelement hinzugefügt, um sicherzustellen, dass keine Verschiebung des Seiteninhalts (aka Seitenverschiebung) erfolgt, wenn die Bildlaufleiste auf hidden eingestellt ist.

Es können zwei Javascript-Funktionen lockScroll() und unlockScroll() definiert werden, um den Bildlauf zu sperren bzw. zu entsperren.

function lockScroll(){
    $html = $('html'); 
    $body = $('body'); 
    var initWidth = $body.outerWidth();
    var initHeight = $body.outerHeight();

    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    $html.data('scroll-position', scrollPosition);
    $html.data('previous-overflow', $html.css('overflow'));
    $html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);   

    var marginR = $body.outerWidth()-initWidth;
    var marginB = $body.outerHeight()-initHeight; 
    $body.css({'margin-right': marginR,'margin-bottom': marginB});
} 

function unlockScroll(){
    $html = $('html');
    $body = $('body');
    $html.css('overflow', $html.data('previous-overflow'));
    var scrollPosition = $html.data('scroll-position');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);    

    $body.css({'margin-right': 0, 'margin-bottom': 0});
}

dabei ging ich davon aus, dass der <body> keinen Anfangsrand hat.

Beachten Sie, dass die obige Lösung zwar in den meisten praktischen Fällen funktioniert, jedoch nicht endgültig ist, da sie für Seiten, die beispielsweise einen Header mit position:fixed enthalten, noch etwas angepasst werden muss. Gehen wir auf diesen speziellen Fall mit einem Beispiel ein. Angenommen zu haben

<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

mit 

#header{position:fixed; padding:0; margin:0; width:100%}

Dann sollte man in den Funktionen lockScroll() und unlockScroll() Folgendes hinzufügen:

function lockScroll(){
    //Omissis   


    $('#header').css('margin-right', marginR);
} 

function unlockScroll(){
    //Omissis   

    $('#header').css('margin-right', 0);
}

Achten Sie schließlich auf einen möglichen Anfangswert für die Ränder oder Polsterungen.

25
JeanValjean

Um das Scrollen auszuschalten, versuchen Sie folgendes:

var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

zurücksetzen:

$(window).off('scroll');
18
Patrick DaVader

Sie können eine Funktion anhängen, um Ereignisse zu scrollen und deren Standardverhalten zu verhindern.

var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

function onMouseWheel(e) {
    e.preventDefault();
}

https://jsfiddle.net/22cLw9em/

5
dzimi

Ich habe dazu ein jQuery-Plugin geschrieben: $. Disablescroll.

Es verhindert das Scrollen von Mausrad-, Touchmove- und Tastendruckereignissen, wie z Page Down.

Es gibt eine Demo hier.

Verwendungszweck:

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");
5
Josh Harrison

Ein Liner zum Deaktivieren des Bildlaufs einschließlich mittlerer Maustaste.

$(document).scroll(function () { $(document).scrollTop(0); });

edit : Es gibt sowieso keine Notwendigkeit für jQuery, wie oben in Vanilla JS (das bedeutet, keine Frameworks, nur JavaScript):

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

this.documentElement.scrollTop - Standard

this.body.scrollTop - IE Kompatibilität

4
Pawel

Können Sie nicht einfach die Körpergröße auf 100% einstellen und den Überlauf verborgen? Siehe http://jsbin.com/ikuma4/13/edit

3
Adrian Schmidt

Ich füge hier eine Antwort ein, die möglicherweise hilfreich ist: jQuery simplemodal Bildlauf deaktivieren

Es zeigt, wie Sie die Bildlaufleisten ausschalten, ohne den Text zu verschieben. Sie können die Teile über simplemodal ignorieren.

2
mhenry1384

Dies funktioniert möglicherweise nicht für Ihre Zwecke, Sie können jedoch jScrollPane erweitern, um andere Funktionen auszulösen, bevor das Scrollen ausgeführt wird. Ich habe das gerade erst ein wenig getestet, aber ich kann bestätigen, dass Sie hineinspringen und das Scrollen vollständig verhindern können. Alles was ich tat war:

  • Laden Sie die Demo herunter Zip: http://github.com/vitch/jScrollPane/archives/master
  • Öffnen Sie die Demo "Events" (events.html)
  • Bearbeiten Sie es, um die nicht verminderte Skriptquelle zu verwenden: <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
  • Fügen Sie in jquery.jscrollpane.js ein "return" ein. in Zeile 666 (günstige Zeilennummer! Falls sich Ihre Version jedoch geringfügig unterscheidet, ist dies die erste Zeile der Funktion positionDragY(destY, animate)

Starten Sie events.html, und Sie sehen ein normales Bildlauffeld, das aufgrund Ihrer Codierintervention nicht durchlaufen wird.

Sie können die Bildlaufleisten des gesamten Browsers auf diese Weise steuern (siehe fullpage_scroll.html). 

Vermutlich ist der nächste Schritt das Hinzufügen eines Aufrufs zu einer anderen Funktion, die abläuft und Ihre Verankerungsmagie ausführt, und dann entscheidet, ob Sie mit dem Scrollen fortfahren möchten oder nicht. Sie haben auch API-Aufrufe, um scrollTop und scrollLeft festzulegen.

Wenn Sie mehr Hilfe wünschen, schreiben Sie, wo Sie sich gerade befinden!

Hoffe das hat geholfen.

2
Jeremy Warne
  • Scroll ausblenden: $("body").css("overflow", "hidden");
  • Scroll wiederherstellen: $("body").css("overflow", "initial");

Jemand hat diesen Code veröffentlicht, der das Problem hat, dass die Bildlaufposition beim Wiederherstellen nicht beibehalten wird. Der Grund ist, dass die Leute dazu neigen, es auf HTML und den Körper oder nur auf den Körper anzuwenden, aber es sollte nur auf HTML angewendet werden. Auf diese Weise wird bei der Wiederherstellung die Bildlaufposition beibehalten:

$('html').css({
    'overflow': 'hidden',
    'height': '100%'
});

Etwas wiederherstellen:

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});
2
Mescalina

Versuchen Sie diesen Code:

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });
1
Jopie

Wenn Sie das Blättern mit der Tastaturnavigation nur deaktivieren möchten, können Sie das Keydown-Ereignis außer Kraft setzen.

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});
1
sean

Sie können dazu auch DOM verwenden. Angenommen, Sie haben eine Funktion, die Sie wie folgt aufrufen:

function disable_scroll() {
document.body.style.overflow="hidden";
}

Und das ist alles was dazu gehört! Hoffe das hilft zusätzlich zu allen anderen Antworten!

0
Brendan

Das habe ich am Ende getan:

CoffeeScript:

    $("input").focus ->
        $("html, body").css "overflow-y","hidden"
        $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
            event.preventDefault()

    $("input").blur ->
        $("html, body").css "overflow-y","auto"
        $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"

Javascript:

$("input").focus(function() {
 $("html, body").css("overflow-y", "hidden");
 $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
   return event.preventDefault();
 });
});

$("input").blur(function() {
 $("html, body").css("overflow-y", "auto");
 $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});
0
Marz

Nicht sicher, ob jemand meine Lösung ausprobiert hat. Dies funktioniert für das gesamte body/html, aber es kann ohne Zweifel auf jedes Element angewendet werden, das ein Scroll-Ereignis auslöst.

Stellen Sie einfach scrollLock ein und aus, wenn Sie es benötigen.

var scrollLock = false;
var scrollMem = {left: 0, top: 0};

$(window).scroll(function(){
    if (scrollLock) {
        window.scrollTo(scrollMem.left, scrollMem.top);
    } else {
        scrollMem = {
            left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
            top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        };
    }
});

Hier ist das Beispiel JSFiddle

Hoffe, das hilft jemandem.

0
FossilMFC

Sie können das Fenster mit einem scrollbaren Div überdecken, um das Scrollen des Inhalts auf einer Seite zu verhindern. Durch das Ausblenden und Anzeigen können Sie den Scroll sperren/freigeben.

Tun Sie so etwas:

#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}
0
Appex

Ich denke, die beste und saubere Lösung ist:

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

Und mit jQuery:

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

Diese Ereignis-Listener sollten das Scrollen blockieren. Entfernen Sie sie einfach, um das Scrollen erneut zu aktivieren

0
Tiziano

Für Leute, die Layouts zentriert haben (über margin:0 auto;), ist hier eine Zusammenfassung der position:fixed -Lösung zusammen mit der von @ tfe vorgeschlagenen Lösung.

Verwenden Sie diese Lösung, wenn Sie Seiten einrasten (aufgrund der ein-/ausgeblendeten Bildlaufleiste).

// lock scroll position, but retain settings for later
var scrollPosition = [
    window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);

…kombiniert mit…

// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])

… Und zum Schluss das CSS für .modal-noscroll

.modal-noscroll
{
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

Ich würde wagen zu sagen, dass dies eher eine richtige Lösung ist als eine der anderen Lösungen, aber ich habe es noch nicht gründlich getestet , dass … : P


Bearbeiten: Bitte beachten Sie, dass ich keine Ahnung habe, wie schlecht dies auf einem Touch-Gerät abschneiden könnte.

0
Matthematics