interface Web
tutoriel CSS
Exemple de compatibilité du style de barre de défilement CSS avec IE et Firefox
Exemple de compatibilité du style de barre de défilement CSS avec IE et Firefox
Exemples de compatibilité des styles de barre de défilement CSS avec IE et Firefox
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Comment supprimer Firefox Snap dans Ubuntu Linux ?
Feb 21, 2024 pm 07:00 PM
Pour supprimer FirefoxSnap dans UbuntuLinux, vous pouvez suivre ces étapes : Ouvrez un terminal et connectez-vous à votre système Ubuntu en tant qu'administrateur. Exécutez la commande suivante pour désinstaller FirefoxSnap : sudosnapremovefirefox Vous serez invité à saisir votre mot de passe administrateur. Entrez votre mot de passe et appuyez sur Entrée pour confirmer. Attendez la fin de l’exécution de la commande. Une fois terminé, FirefoxSnap sera complètement supprimé. Notez que cela supprimera les versions de Firefox installées via le gestionnaire de packages Snap. Si vous avez installé une autre version de Firefox par d'autres moyens (tels que le gestionnaire de packages APT), vous ne serez pas affecté. Suivez les étapes ci-dessus
Mozilla Firefox peut-il être désinstallé ?
Mar 15, 2023 pm 04:40 PM
Mozilla Firefox peut être désinstallé ; Firefox est un navigateur tiers et peut être désinstallé s'il n'est pas nécessaire. Méthode de désinstallation : 1. Dans le menu Démarrer, cliquez sur « Système Windows » - « Panneau de configuration » 2. Dans l'interface « Panneau de configuration », cliquez sur « Programmes et fonctionnalités » 3. Dans la nouvelle interface, recherchez et double-cliquez ; Icône du navigateur Firefox ; 4. Dans la fenêtre contextuelle de désinstallation, cliquez sur « Suivant » ; 5. Cliquez sur « Désinstaller ».
Nouvelles fonctionnalités de Firefox 113 : prise en charge des animations AV1, générateur de mots de passe amélioré et fonctionnalités d'image dans l'image
Mar 05, 2024 pm 05:20 PM
Selon des informations récentes, alors que Mozilla a publié la version stable de Firefox 112, il a également annoncé que la prochaine version majeure, Firefox 113, est entrée dans le canal bêta et prend en charge les animations AV1, le générateur de mots de passe amélioré et les fonctionnalités d'image dans l'image. Les principales nouvelles fonctions/caractéristiques de Firefox 113 sont les suivantes : Prise en charge des images animées au format AV1 (AVIS) Améliorer la sécurité du générateur de mot de passe en introduisant des caractères spéciaux Améliorer la fonction image dans l'image, prendre en charge le rembobinage, afficher l'heure de la vidéo ; , et activez le plein écran plus facilement. Le mode fournit les fichiers d'installation DEB officiels pour les distributions Debian et Ubuntu. Fonctionnalité d'importation de signets mise à jour, les icônes pour les signets importés sont prises en charge par défaut. Le décodage vidéo AV1 accéléré par le matériel est activé par défaut sur le matériel pris en charge à l'aide de w.
Comment utiliser Mozilla Firefox dans Scrapy pour résoudre le problème de numérisation du code QR pour se connecter ?
Jun 22, 2023 pm 09:50 PM
Pour les robots d'exploration, explorer des sites Web qui nécessitent une connexion, un code de vérification ou une connexion par code de numérisation est un problème très gênant. Scrapy est un framework d'exploration très facile à utiliser en Python, mais lors du traitement des codes de vérification ou de la numérisation des codes QR pour se connecter, certaines mesures spéciales doivent être prises. En tant que navigateur courant, Mozilla Firefox propose une solution qui peut nous aider à résoudre ce problème. Le module principal de Scrapy est tordu et ne prend en charge que les requêtes asynchrones, mais certains sites Web nécessitent l'utilisation de cookies et
Apple publie une mise à jour pour corriger la vulnérabilité WebKit et la consommation d'énergie excessive du MacBook
Apr 15, 2023 am 10:49 AM
Apple a publié des mises à jour pour iPhone, iPad, Mac et Apple Watch. Bien que les mises à jour pour chaque appareil soient petites, elles corrigent les vulnérabilités de WebKit. La société a également assuré avoir corrigé un bug qui provoquait une décharge inattendue de la batterie des ordinateurs portables MacBook. Apple iOS et iPadOS 15.3.1 sont des mises à jour mineures. Il ne contient en réalité aucune fonctionnalité majeure. Cependant, il est utile pour les personnes utilisant des plages braille. De plus, la mise à jour résout une vulnérabilité d’exécution de code arbitraire. Les notes de mise à jour pour iOS 15.3.1 mentionnent : iOS 15.3.1 fournit des mises à jour de sécurité importantes pour votre iPhone et des correctifs
Lancement du navigateur Firefox Firefox 115, prend en charge la dernière version de Win7/Win8.1
Mar 04, 2024 pm 04:46 PM
Dernières nouvelles d'aujourd'hui, Mozilla a officiellement publié aujourd'hui la mise à jour de la version stable du navigateur Firefox Firefox 115. La chose la plus remarquable à propos de cette mise à jour est qu'il s'agit de la dernière version prenant en charge Win7/Win8, macOS10.12, 10.13 et 10.14. Adresse de téléchargement : https://ftp.mozilla.org/pub/firefox/releases/115.0/Mozilla indiqué dans le journal de mise à jour officiel : Microsoft mettra fin au support des systèmes Win7 et Win8 en janvier 2023, et Firefox 115 est publié aujourd'hui. La version est la dernière mise à jour de version reçue par les utilisateurs dudit système. Utilisateurs Win7 et Win8
Ubuntu 23.10 exécutera Firefox en mode Wayland natif par défaut
Feb 29, 2024 am 10:10 AM
Canonical a récemment annoncé que dans la prochaine Ubuntu 23.10, Firefox Snap a été configuré pour s'exécuter par défaut en mode Wayland. Remarque : Ubuntu dispose actuellement de la session Wayland par défaut et Firefox peut également fonctionner normalement. Cependant, FirefoxSnap fonctionne actuellement en mode de compatibilité XWayland, plutôt qu'en mode Wayland natif strict. Canonical a annoncé qu'il exécuterait le navigateur Firefox en mode Wayland par défaut, afin que des problèmes tels que le flou de l'interface et la distorsion de mise à l'échelle ne se produisent pas sur les écrans HiDPI, et qu'il prendra en charge les gestes tactiles tels que le glisser et le pincer. Comme mentionné ci-dessus, Ubunt
L'Europe permet à Apple d'assouplir les restrictions du navigateur : les moteurs non-WebKit peuvent être sélectionnés, Chrome peut être utilisé comme navigateur par défaut
Jan 26, 2024 am 10:42 AM
Selon les informations du 26 janvier, après la mise à niveau vers la mise à jour iOS17.4Beta1, les utilisateurs d'iPhone en Europe verront une nouvelle fenêtre après avoir ouvert le navigateur Safari, qui prend en charge la modification du navigateur par défaut. Les utilisateurs européens peuvent configurer des navigateurs non-Safari, notamment Firefox, Opera, Chrome, Brave et Microsoft Edge, selon leurs propres préférences. Les applications de navigateur peuvent désormais également utiliser des moteurs de navigateur autres que WebKit, notamment des applications de navigateur et des expériences de navigation intégrées aux applications. Apple exigeait auparavant que tous les navigateurs sur iOS, y compris les navigateurs courants tels que Chrome et Firefox, utilisent le moteur WebKit. À l'avenir, Chrome.
