Wie wird die vertikale Bildlaufleiste in einem Browser immer angezeigt?

Ich möchte immer vertikale Bildlaufleiste in meiner Webseite zeigen. Ist es möglich, Javascript zu verwenden? Ich denke, dass es möglich ist, Javascript oder jQuery zu verwenden. Ich möchte eine vertikale Bildlaufleiste, ob genügend Inhalt vorhanden ist oder nicht.Wie wird die vertikale Bildlaufleiste in einem Browser immer angezeigt?

danke.

Quelle

2010-10-29 gautamlakum

Sie müssen diese Dinge zu lernen fragen. – Rimian

Mögliches Duplikat von [Die Hauptscrollleiste immer sichtbar machen] (https://stackoverflow.com/questions/1202425/making-the-main-scrollbar-allways-visible) – Bae

jQuery sollte nicht benötigt werden. Sie könnten versuchen, das CSS hinzuzufügen:

Dies funktioniert über die neuesten Browser, sogar IE6.

Quelle

2010-10-29 08:07:52

Ich glaube die 'overflow-x'und' overflow- x' haben mir in der Vergangenheit einige Schmerzen bereitet. –

Ich denke, das wird die Bildlaufleiste nur anzeigen, wenn es Überlauf gibt. Zum Anzeigen der Bildlaufleiste versuchen Sie immer body { Überlauf-y: scroll; Höhe: 101%; } –

Sie haben diese Runde in die falsche Richtung. Wenn Sie den Überlauf: auto einstellen, werden die Bildlaufleisten bei Bedarf angezeigt. Überlauf: Bildlauf zeigt immer die Bildlaufleisten an. Wenn der Inhalt nicht lang genug ist, sind die Bildlaufleisten ausgegraut. –

Verwenden Sie einfach CSS.

body { 
    overflow-y: scroll; 
}

Quelle

2010-10-29 08:11:01

Beachten Sie, dass das OP nur die * vertikale * Bildlaufleiste anzeigen soll. Die Eigenschaft "Überlauf" bedeutet in diesem Fall, dass die horizontale Bildlaufleiste ebenfalls angezeigt wird. Sie sollten stattdessen 'overflow-y' verwenden. – Boaz

@rogerdpack In der Tat hat es, vor 3 Jahren; 4 Stunden nach dem ursprünglichen Kommentar :) – Boaz

eingestellt den overflow property eines haltigen div zu scroll.

Quelle

2010-10-29 08:11:46 jambox

versuchen Sie, eine Funktion auf die onload-Methode Ihres body-Tags und in dieser Funktion ändern Sie den Stil des Körpers wie dieses Dokument.body.style.overflow = 'scroll'; auch müssen Sie die Breite Ihres html setzen, wie dies auch horizontale Bildlaufleisten zeigen

Ihre HTML-Datei wird so etwas wie dieses

<script language="javascript"> 
    function showscroll() { 
     document.body.style.overflow = 'scroll'; 
    } 
</script> 
</head> 
<body onload="showscroll()">

Quelle

2010-10-29 08:18:17 megha

Nun, OP fragte nach einer Javascript-Lösung, aber das heißt nicht, dass das ist, was er braucht. Dies ist eine sehr schlechte Lösung, um einen Stil zu ändern. Das ist, was CSS für: Cascaded ** Style ** Sheets ist. In CSS ist es nur eine Zeile, wie die angenommene Antwort zeigt. – stevenvh

sehen hier ein Verfahren ist. Dies bietet nicht nur einen Scrollbar-Container, sondern zeigt auch die Bildlaufleiste, selbst wenn der Inhalt nicht ausreicht (gemäß Ihrer Anforderung). Würde auch auf dem iPhone funktionieren, und Android-Geräte als auch ..

<style> 
    .scrollholder { 
     position: relative; 
     width: 310px; height: 350px; 
     overflow: auto; 
     z-index: 1; 
    } 
</style> 

<script> 
    function isTouchDevice() { 
     try { 
      document.createEvent("TouchEvent"); 
      return true; 
     } catch (e) { 
      return false; 
     } 
    } 

    function touchScroll(id) { 
     if (isTouchDevice()) { //if touch events exist... 
      var el = document.getElementById(id); 
      var scrollStartPos = 0; 

      document.getElementById(id).addEventListener("touchstart", function (event) { 
       scrollStartPos = this.scrollTop + event.touches[0].pageY; 
       event.preventDefault(); 
      }, false); 

      document.getElementById(id).addEventListener("touchmove", function (event) { 
       this.scrollTop = scrollStartPos - event.touches[0].pageY; 
       event.preventDefault(); 
      }, false); 
     } 
    } 
</script> 

<body onload="touchScroll('scrollMe')"> 

    <!-- title --> 
    <!-- <div class="title" onselectstart="return false">Alarms</div> --> 
    <div class="scrollholder" id="scrollMe"> 

</div> 
</body>

Quelle

2012-07-30 21:54:01

Nur ein Hinweis: In OS X Lion, Überlauf auf „Blättern“ verhält sich mehr wie Auto, dass Scrollbalken wird nur zeigen, wenn sie verwendet wird, . Sie werden verschwinden, wenn sie nicht benutzt werden. Wenn also die obigen Lösungen nicht funktionieren, könnte das der Grund sein.

Dies ist, was Sie es reparieren müssen:

::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 7px; 
} 
::-webkit-scrollbar-thumb { 
    border-radius: 4px; 
    background-color: rgba(0, 0, 0, .5); 
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); 
}

Sie können es entsprechend stylen.

Quelle

2015-07-07 20:15:57 molls223

Fügen Sie die Klasse zum div hinzu, das Sie scrollen können.

Überlauf-x: versteckt; blendet die horizontale Bildlaufleiste aus. Während Überlauf-y: scroll; können Sie vertikal scrollen.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.scroll { 
    width: 500px; 
    height: 300px; 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 


</style> 
</head> 
<body> 

<div class="scroll"><h1> DATA </h1></div>

Quelle

2017-06-09 08:37:31

Während dieser Code die Frage beantworten kann, würde die Bereitstellung eines zusätzlichen Kontextes hinsichtlich dessen, wie und/oder warum er das Problem löst, den langfristigen Wert der Antwort verbessern. – Badacadabra

Bitte verwenden Sie den Link [Bearbeiten], um zu erklären, wie dieser Code funktioniert, und geben Sie nicht nur den Code an, da eine Erklärung den zukünftigen Lesern eher hilft. Siehe auch [Antwort]. [Quelle] (http://stackoverflow.com/users/5244995) –

Erläuterung hinzugefügt. –

Wie wird die vertikale Bildlaufleiste in einem Browser immer angezeigt?

Antwort

Verwandte Themen