2016-03-20 7 views
-1

Ich würde Scrollbar auf Handys zeigen, aber auf größeren Bildschirmen (zum Beispiel - auf PC) möchte ich diese Bildlaufleiste ausblenden.iFrame - kann keine Bildlaufleiste mit Überlauf in CSS-Datei

Hier ist mein HTML-Code:

<iframe frameborder="0" marginwidth="0" marginheight="0" width="100%" height="750" src="http://meteo.pl/um/php/meteorogram_id_um.php?ntype=0u&id=661"></iframe> 

und hier ist CSS:

iframe { 
overflow-x: scroll !important; 
overflow-y: hidden !important; 
} 

Endlich kann ich zwei Scrollbalken sehen. Wenn ich versuche, auf diese Weise:

iframe { 
overflow-x: hidden!important; 
overflow-y: hidden !important; 
} 

ich zwei Scrollbalken immer bekommen, so kann ich diese Scrollbar in CSS-Datei nicht verwalten. Warum??

Antwort

1
  1. Stellen Sie eine id auf das iframe Attribut:

<iframe src="your_source" scrolling="yes" id="myFrame"/>

  1. Wir brauchen Ereignisse, auf die wir Funktionen aufrufen, so Attribute hinzufügen onload und onResize zu

<body onresize="f()" onload="f()"> ... </body>

3.Schließlich die JavaScript-Funktion hinzufügen, die die Änderungen des Scrollens je nach Bildschirmgröße behandelt:

<script> 
function f(){ 
if(document.body.clientWidth<700) 

//condition which checks if the Width of page is less than 700, put your own value here 

{document.getElementById("myFrame").setAttribute("scrolling","yes");} 

//if yes, than, with help of function .getElementById we fetch element with id="myFrame" and change its attribute’s scrolling value to "yes" (mobile device) 

else 

{document.getElementById("myFrame").setAttribute("scrolling","no");} 

//if the width of the page is not less than 700 (or any), then scrolling's value is "no" (widescreen resolution) 

} 
<script> 
+0

ich kontrollieren kann Client Breite mit CSS: '@media Bildschirm und (min-width: 1280px)' - und es ist alles. Aber es ist wirklich unmöglich Scrollbar in CSS zu verwalten? Ich brauche Javascript? – Majkson

+0

Es ist möglich, mit dem Scrollen mit CSS umzugehen, allerdings müssen Sie das Scrollen abhängig von der Bildschirmgröße aktivieren und deaktivieren, da Ihre Benutzer sowohl Mobilgeräte als auch Laptops verwenden können. Um dies zu tun, wäre der beste Weg, eine JavaScript-Funktion zu schreiben, die ständig die Breite des Bildschirms berechnet und dementsprechend handelt. –

+0

Also wenn es möglich ist - zeig mir wie ich es machen kann. Vergessen Sie "Laptops und Mobiltelefone". Ich würde gerne wissen, wie man die Bildlaufleiste in der CSS-Datei verwaltet. – Majkson

Verwandte Themen