Web-Frontend
CSS-Tutorial
Beispiel dafür, wie der CSS-Bildlaufleistenstil mit IE und Firefox kompatibel ist
Beispiel dafür, wie der CSS-Bildlaufleistenstil mit IE und Firefox kompatibel ist
Beispiele dafür, wie CSS-Bildlaufleistenstile mit IE und Firefox kompatibel sind
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片与JavaScript配合做出个性滚动条</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:20px 0 400px 20px; font:12px Arial; }
h1 { font-size:14px; }
ol { margin:20px; line-height:160%; }
#out {
position:relative;
width:500px;
height:300px;
margin:100px 0 100px 80px;
border:1px solid #369;
overflow:hidden;
}
#content {
width:520px;
height:100%;
overflow:auto;
-moz-user-select:none;
}
#scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a {
background-image:url(http://www.codefans.net/jscss/demoimg/200910/un_bg_scrollBar.gif);
}
#scrollBar {
position:absolute;
top:0;
right:0;
z-index:9;
width:14px;
height:100%;
background-repeat:repeat-y;
background-position:-42px 0;
float:left;
}
#scrollBarTop,#scrollBarHandle,#scrollBarBottom {
position:absolute;
left:0;
cursor:default;
}
#scrollBarTop,#scrollBarBottom {
width:100%;
height:14px;
color:#fff;
text-align:center;
}
#scrollBarTop { top:0; }
#scrollBarBottom { bottom:0; }
#scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; }
.scroll_bar_top { background-position:0 0; }
.scroll_bar_top_a { background-position:-14px 0; }
.scroll_bar_bottom { background-position:-56px 0; }
.scroll_bar_bottom_a { background-position:-70px 0; }
</style>
</head>
<body>
<div id="out">
<div id="content">
fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs
<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs
<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs
<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs
<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs
<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111
<br />fsdfs<br />
</div>
<div id="scrollBar">
<div id="scrollBarTop" class="scroll_bar_top"></div>
<div id="scrollBarHandle"></div>
<div id="scrollBarBottom" class="scroll_bar_bottom"></div>
</div>
</div>
<script>
var ximen = {
$:function(o){ return document.getElementByIdx_x(o); },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
getOffset:function(o) {
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
return { top:t, height:h };
},
bind:function(o,eType,fn) {
if(o.addEventListener) { o.addEventListener(eType,fn,false); }
else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
unbind:function(o,eType,fn) {
if(o.removeEventListener) { o.removeEventListener(eType,fn,false); }
else if(o.detachEvent) { o.detachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
stopPropagate:function(e) {
if(e && e.stopPropagation) { e.stopPropagation(); }
else { window.event.cancelBubble = true; }
return false;
},
stopDefault:function(e) {
e = e || window.event;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
}
};
(function(){
var myScrollDown,myScrollUp,scrollBarMouseDown,scrollBarMouseUp,relY,
out = ximen.$("out"),
content = ximen.$("content"),
scrollBar = ximen.$("scrollBar"),
scrollBarTop = ximen.$("scrollBarTop"),
scrollBarHandle = ximen.$("scrollBarHandle"),
scrollBarBottom = ximen.$("scrollBarBottom"),
scrollBarUpHeight = parseInt(ximen.getStyle(scrollBarTop).height),
scrollBarBottomHeight = parseInt(ximen.getStyle(scrollBarBottom).height),
contentScrollHeight = content.scrollHeight,//将content.scrollHeight赋一次值,解决IE6下scrollHeight需调用两次的bug
scrollBarHandleHeight = parseInt(content.offsetHeight/content.scrollHeight * (scrollBar.offsetHeight - scrollBarUpHeight - scrollBarBottomHeight)),
setScrollBarHandle = function() {//当内容超多时设置拖拽条子的最小高度
scrollBarHandle.style.top = scrollBarUpHeight + "px";
if(scrollBarHandleHeight > 15) { scrollBarHandle.style.height = scrollBarHandleHeight + "px"; }
else { scrollBarHandleHeight = 15; scrollBarHandle.style.height = "15px"; }
},
clearAllInterval = function() { clearInterval(myScrollDown); clearInterval(myScrollUp); clearInterval(scrollBarMouseDown); },
forMousemove = function(e) {
var e = e || window.event;
content.scrollTop = (e.clientY - relY - scrollBarUpHeight)/(scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight)*(content.scrollHeight - content.offsetHeight);
},
forMouseDown = function(event){
var et = event.target || event.srcElement;
relY = event.clientY - et.offsetTop;
ximen.bind(document,"mousemove",forMousemove);
},
scrollDir = function(e) {
var e = e || window.event,eDir; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向
if(e.wheelDelta) { eDir = e.wheelDelta/120; }
else if(e.detail) { eDir = -e.detail/3; }
if(eDir > 0) { content.scrollTop -= 80; } //步长设80像素a比较接近window滚动条的滚动速度
else { content.scrollTop += 80; }
ximen.stopDefault(e);
},
scrollBarClick = function(e) {
var e = e || window.event,
mStep = scrollBar.offsetHeight,
documentScrollTop = document.documentElement.scrollTop,
hOffset = ximen.getOffset(scrollBarHandle);
if(documentScrollTop + e.clientY < hOffset.top) { scrollBarMouseDown = setInterval(function(){ content.scrollTop -= 15; },10); }
else if(documentScrollTop + e.clientY > hOffset.top + hOffset.height) { scrollBarMouseDown = setInterval(function(){ content.scrollTop += 15; },10); }
};
setScrollBarHandle();
ximen.bind(content,"scroll",function(){
scrollBarHandle.style.top = content.scrollTop/(content.scrollHeight - content.offsetHeight) * (scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight) + scrollBarUpHeight + "px";
});
ximen.bind(scrollBarBottom,"mousedown",function(){ myScrollDown = setInterval(function(){ content.scrollTop += 15; },10); });
ximen.bind(scrollBarTop,"mousedown",function(){ myScrollUp = setInterval(function(){ content.scrollTop -= 15; },10); });
ximen.bind(scrollBarBottom,"mouseup",clearAllInterval);
ximen.bind(scrollBarBottom,"mouseout",clearAllInterval);
ximen.bind(scrollBarTop,"mouseup",clearAllInterval);
ximen.bind(scrollBarTop,"mouseout",clearAllInterval);
ximen.bind(scrollBarHandle,"mousedown",forMouseDown);
ximen.bind(document,"mouseup",function(){
ximen.unbind(document,"mousemove",forMousemove);
ximen.unbind(scrollBarHandle,"mousemove",forMousemove);
});
ximen.bind(out,"selectstart",function(){ return false; });
ximen.bind(out,"select",function(){ document.selection.empty(); });
ximen.bind(out,"mousewheel",scrollDir);
ximen.bind(out,"DOMMouseScroll",scrollDir);
ximen.bind(scrollBar,"mousedown",scrollBarClick);
ximen.bind(scrollBar,"mouseup",clearAllInterval);
ximen.bind(scrollBarTop,"click",function(event){ ximen.stopPropagate(event); });
ximen.bind(scrollBarTop,"mousedown",function(){ scrollBarTop.className = "scroll_bar_top_a"; });
ximen.bind(scrollBarTop,"mouseup",function(){ scrollBarTop.className = "scroll_bar_top"; });
ximen.bind(scrollBarTop,"mouseout",function(){ scrollBarTop.className = "scroll_bar_top"; });
ximen.bind(scrollBarBottom,"click",function(event){ ximen.stopPropagate(event); });
ximen.bind(scrollBarBottom,"mousedown",function(){ scrollBarBottom.className = "scroll_bar_bottom_a"; });
ximen.bind(scrollBarBottom,"mouseup",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
ximen.bind(scrollBarBottom,"mouseout",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
})();
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonBeispiel dafür, wie der CSS-Bildlaufleistenstil mit IE und Firefox kompatibel ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie entferne ich Firefox Snap unter Ubuntu Linux?
Feb 21, 2024 pm 07:00 PM
Um FirefoxSnap unter Ubuntu Linux zu entfernen, können Sie die folgenden Schritte ausführen: Öffnen Sie ein Terminal und melden Sie sich als Administrator bei Ihrem Ubuntu-System an. Führen Sie den folgenden Befehl aus, um FirefoxSnap zu deinstallieren: sudosnapremovefirefox Sie werden zur Eingabe Ihres Administratorkennworts aufgefordert. Geben Sie Ihr Passwort ein und drücken Sie zur Bestätigung die Eingabetaste. Warten Sie, bis die Befehlsausführung abgeschlossen ist. Sobald der Vorgang abgeschlossen ist, wird FirefoxSnap vollständig entfernt. Beachten Sie, dass dadurch Versionen von Firefox entfernt werden, die über den Snap-Paketmanager installiert wurden. Wenn Sie eine andere Version von Firefox auf andere Weise installiert haben (z. B. über den APT-Paketmanager), sind Sie davon nicht betroffen. Führen Sie die oben genannten Schritte durch
Kann Mozilla Firefox deinstalliert werden?
Mar 15, 2023 pm 04:40 PM
Mozilla Firefox kann deinstalliert werden; Firefox ist ein Browser eines Drittanbieters und kann deinstalliert werden, wenn er nicht benötigt wird. Deinstallationsmethode: 1. Klicken Sie im Startmenü auf „Windwos System“ – „Systemsteuerung“ 2. Klicken Sie in der „Systemsteuerung“ auf „Programme und Funktionen“ 3. Suchen Sie in der neuen Benutzeroberfläche und doppelklicken Sie darauf Firefox-Browser-Symbol; 4. Klicken Sie im Deinstallations-Popup-Fenster auf „Weiter“. 5. Klicken Sie auf „Deinstallieren“.
Neue Funktionen von Firefox 113: Unterstützung für AV1-Animationen, verbesserter Passwortgenerator und Bild-in-Bild-Funktionen
Mar 05, 2024 pm 05:20 PM
Aktuellen Nachrichten zufolge veröffentlichte Mozilla zwar die stabile Version von Firefox 112, gab aber auch bekannt, dass die nächste Hauptversion, Firefox 113, in den Beta-Kanal eingetreten ist und AV1-Animationen, einen verbesserten Passwortgenerator und Bild-in-Bild-Funktionen unterstützt. Die wichtigsten neuen Funktionen/Features von Firefox 113 sind: Unterstützung für animierte Bilder im AV1-Format (AVIS); Verbesserung der Sicherheit des Passwortgenerators durch Einführung von Sonderzeichen; Unterstützung des Rücklaufs, Anzeige der Videozeit , und den Vollbildmodus einfacher zu aktivieren. Der Modus bietet offizielle DEB-Installationsdateien für Debian- und Ubuntu-Distributionen. Symbole für importierte Lesezeichen werden standardmäßig auf unterstützter Hardware mit w unterstützt
Wie kann ich Mozilla Firefox in Scrapy verwenden, um das Problem des Scannens des QR-Codes zum Anmelden zu lösen?
Jun 22, 2023 pm 09:50 PM
Für Crawler ist das Crawlen von Websites, die eine Anmeldung, einen Bestätigungscode oder einen Scan-Code erfordern, ein sehr problematisches Problem. Scrapy ist ein sehr einfach zu verwendendes Crawler-Framework in Python. Bei der Verarbeitung von Bestätigungscodes oder dem Scannen von QR-Codes zum Anmelden müssen jedoch einige besondere Maßnahmen ergriffen werden. Als gängiger Browser bietet Mozilla Firefox eine Lösung, die uns bei der Lösung dieses Problems helfen kann. Das Kernmodul von Scrapy ist Twisted, das nur asynchrone Anfragen unterstützt, aber einige Websites erfordern die Verwendung von Cookies und
Firefox-Browser Firefox 115 veröffentlicht, unterstützt die letzte Version von Win7/Win8.1
Mar 04, 2024 pm 04:46 PM
Die neuesten Nachrichten von heute: Mozilla hat heute offiziell das stabile Versionsupdate des Firefox-Browsers Firefox 115 veröffentlicht. Das Bemerkenswerteste an diesem Update ist, dass dies die letzte Version ist, die Win7/Win8, macOS 10.12, 10.13 und 10.14 unterstützt. Download-Adresse: https://ftp.mozilla.org/pub/firefox/releases/115.0/Mozilla gab im offiziellen Update-Protokoll an: Microsoft wird die Unterstützung für Win7- und Win8-Systeme im Januar 2023 einstellen und Firefox 115 wurde heute veröffentlicht. Die Version ist das letzte Versionsupdate, das Benutzer dieses Systems erhalten haben. Benutzer von Win7 und Win8
Apple veröffentlicht ein Update zur Behebung der WebKit-Schwachstelle und des übermäßigen Stromverbrauchs im MacBook
Apr 15, 2023 am 10:49 AM
Apple hat Updates für iPhone, iPad, Mac und Apple Watch veröffentlicht. Obwohl die Updates für jedes Gerät klein sind, beheben sie WebKit-Schwachstellen. Das Unternehmen versicherte außerdem, einen Fehler behoben zu haben, der dazu führte, dass die Akkus von MacBook-Laptops unerwartet leer wurden. Bei Apple iOS und iPadOS 15.3.1 handelt es sich um kleinere Updates. Es enthält eigentlich keine wesentlichen Funktionen. Es ist jedoch nützlich für Leute, die Braillezeilen verwenden. Darüber hinaus behebt das Update eine Sicherheitslücke bezüglich der Ausführung willkürlichen Codes. In den Update-Hinweisen für iOS 15.3.1 wird Folgendes erwähnt: iOS 15.3.1 bietet wichtige Sicherheitsupdates für Ihr iPhone und Korrekturen
Ubuntu 23.10 führt Firefox standardmäßig im nativen Wayland-Modus aus
Feb 29, 2024 am 10:10 AM
Canonical gab kürzlich bekannt, dass Firefox Snap im kommenden Ubuntu 23.10 so konfiguriert wurde, dass es standardmäßig im Wayland-Modus läuft. Hinweis: Ubuntu verfügt derzeit standardmäßig über die Wayland-Sitzung, und Firefox kann auch normal funktionieren. Allerdings läuft FirefoxSnap derzeit tatsächlich im XWayland-Kompatibilitätsmodus und nicht im strikten nativen Wayland-Modus. Canonical kündigte an, den Firefox-Browser standardmäßig im Wayland-Modus auszuführen, sodass Probleme wie Unschärfe der Benutzeroberfläche und Skalierungsverzerrungen auf HiDPI-Displays nicht auftreten, und Touch-Gesten wie Ziehen und Kneifen werden unterstützt. Wie oben erwähnt, Ubunt
Sollte Apple weiterhin konkurrierende Browser-Engines auf iOS verbieten?
Apr 16, 2023 pm 07:22 PM
Apple verlangt, dass alle Apps, die unter iOS und iPadOS im Internet surfen, seine eigene Browser-Engine, WebKit, verwenden. Aber sollte es konkurrierende Browser-Engines angesichts des Vorwurfs wettbewerbswidrigen Verhaltens weiterhin wirksam verbieten? Großen Technologieunternehmen wurde kürzlich wettbewerbswidriges Verhalten vorgeworfen. Andrea Coscelli, Geschäftsführerin der britischen Wettbewerbs- und Marktaufsichtsbehörde (CMA), gab in einer Pressemitteilung bekannt: Apple und Google fordern einen Tribut bei der Art und Weise, wie wir unsere Telefone nutzen. Es hat sich eine schlechte Angewohnheit entwickelt, von der wir befürchten, dass sie bei Millionen Menschen im Vereinigten Königreich die Orientierung verliert. Unter den Vorwürfen wettbewerbswidrigen Verhaltens wird Apple auch vorgeworfen, die Verwendung von Apps, die im Internet surfen, auf iOS und iPadOS zu verlangen.
