Tarayıcıların dikey ve yatay kaydırma çubuklarını devre dışı bırakın

117

Tarayıcıların dikey ve yatay kaydırma çubuklarını jQuery veya javascript kullanarak devre dışı bırakmak mümkün müdür?

javascript jquery

— naveen
kaynak

Özellikle bazı durumlarda kaydırma ve kaydırma arasında geçiş yapmak istiyorsanız bu çözümün daha çok tercih

— edileceğini düşünüyorum

Bu sorunun daha eksiksiz bir cevabını burada bulabilirsiniz stackoverflow.com/a/25561646/1922144

— davidcondrey

144

Kaydırma çubuklarını dinamik olarak gizleme ve gösterme olanağına ihtiyacınız olursa,

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

ve

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

kodunuzda bir yerde.

— Alexander Prokofyev
kaynak

4

Gizli taşma her zaman IE'de çalışmaz. Aşağıdaki AnthonyWJones cevabına bakın.

— Tiago Almeida

4

oveflow: hiddenakıllı telefonlarda hiçbir şeyi engellemez.

— dvlden

— Kromda

121

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

— Lyncee
kaynak

5

Tek saf javascript cevabı olmak için iki olumlu oy dikkate değer derecede azdır.

— Fzs2

2

@HermannIngjaldsson: Görmek OP JavaScript veya jQuery çözümü istedi ve 4 yıl önce bir jQuery çözümünü kabul etmişti, bu sadece mantıklı. Cevabın iyi olmadığını söylemiyorum, sadece düşük oylar konusunda bariz olanı belirterek. Benden +1 yine de.

— Hayır,

Bu benim için işe yarayan tek çözüm, çünkü gizli gövde taşması tüm belgeye saldırmıyor, bu sorun için doğru çözüm bu! çok teşekkürler, bana çok zaman kazandırdın!

— Adnane. T

Bu mükemmel bir çözüm ve bir oylamayı hak ediyor. Ayrıca, sayfanın en üste kaydırılacağı sabit css ile ilgili sorunu çözer.

— haipham23

50

CSS'yi deneyin

<body style="overflow: hidden">

— Ray Lu
kaynak

15

Tarayıcı uyumluluğu için bu stili HTML etiketine de eklerdim: html, body {overflow: hidden;}

— Ady

32

Şimdiye kadar taşma var: vücutta gizli. Ancak IE bunu her zaman kabul etmez ve body öğesine de scroll = "no" koymanız ve / veya overflow: hidden'ı html öğesinde de yerleştirmeniz gerekir.

Görüntü bağlantı noktasının 'kontrolünü ele almanız' gerektiğinde bunu daha da ileri götürebilirsiniz, bunu yapabilirsiniz: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

Gövdede% 100 yükseklik verilen bir öğe, pencere görünüm alanının tam yüksekliğine sahiptir ve kesinlikle alt kullanılarak konumlandırılan öğe: nnPX, pencerenin alt kenarının nn piksel üstüne ayarlanacaktır, vb.

— AnthonyWJones
kaynak

2

vücut css ',' olması gereken ';' değil mi?

— paynestrike

12

CSS'yi deneyin.

Horizontal'ı kaldırmak istiyorsanız

overflow-x: hidden;

Ve Dikey'i kaldırmak istiyorsanız

overflow-y: hidden;

— shafraz
kaynak

10

IE'nin modern sürümlerinde (IE10 ve üzeri), kaydırma çubukları -ms-overflow-styleözellik kullanılarak gizlenebilir .

html {
     -ms-overflow-style: none;
}

Chrome'da, kaydırma çubuklarının stili şu şekildedir:

::-webkit-scrollbar {
    display: none;
}

Bir web uygulamasında 'varsayılan' gövde kaydırmayı kullanmak istiyorsanız bu çok kullanışlıdır, ki bu çok daha hızlıdır overflow-y: scroll.

— Lg102
kaynak

sadece bu benim için tüm cevaplardan çalıştı :) teşekkürler!

— Gediminas

9

Internet Explorer 6 için de desteğe ihtiyacınız varsa, html'yi doldurmanız yeterli

$("html").css("overflow", "hidden");

ve

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

— Gawin
kaynak

5

IE'nin kaydırma çubuklarında bazı hataları var. Dolayısıyla, ikisinden birini istiyorsanız, yatay kaydırma çubuğunu gizlemek için aşağıdakileri eklemelisiniz:

overflow-x: hidden;
overflow-y:scroll;

ve dikey gizlemek için:

overflow-y: hidden;
overflow-x: scroll;

— Zeeshan Ali
kaynak

4

(Henüz yorum yapamam ama bunu paylaşmak istedim):

Lyncee'nin kodu masaüstü tarayıcısında benim için çalıştı. Ancak iPad'de (Chrome, iOS 9) uygulamanın çökmesine neden oldu. Düzeltmek için değiştirdim

document.documentElement.style.overflow = ...

için

document.body.style.overflow = ...

bu benim sorunumu çözdü.

— Erasmus Cedernaes
kaynak

2

Firefox bir anahtar kestirme ok olduğundan, muhtemelen bir koymak istediğiniz <div>CSS stili ile çevresinde: overflow:hidden;.

— Qvcool
kaynak

2

JQuery kullanarak, bu kodla kaydırma çubuğunu devre dışı bırakabilirsiniz:

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

Ayrıca bu kodla tekrar etkinleştirebilirsiniz:

 $('body').unbind('mousewheel');

— gtzinos
kaynak