Maison interface Web js tutoriel 关于scrollLeft,scrollTop的浏览器兼容性测试_javascript技巧

关于scrollLeft,scrollTop的浏览器兼容性测试_javascript技巧

May 16, 2016 pm 05:40 PM
兼容

今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样.逐一排查,肯定是在计算窗口位置的时候,少加了scrollTop这个值.在查看源代码的时候发现直接采用

document.documentElement.scrollTop这个,但在chrome下这个值为0.

在有文档声明的情况下,也就是第一行有个dtd声明,标准浏览器认识document.documentElement.scrollTop,可chrome竟然不认识这斯.在没有文档声明的情况下,chrome,safari还是可以读取到scrollTop值.因为chrome是通过document.body.scrollTop获取值的.

解决这个问题:不用去那么麻烦去判断浏览器类别,因为在不同情况下,document.body、document.documentElement都有可能获取到不同的值的特点.问题就很好解决.
在获取浏览器或某div的scrollTop或scrollLeft时,我封装了一个方法:

复制代码 代码如下:

var ueScroll=(function(){
//获取scrollX
function scrollX(ele){
var element=ele || document.body;
return element.scrollLeft || (document.documentElement && document.documentElement.scrollLeft);
}
//获取scrollY
function scrollY(ele){
var element=ele || document.body;
return element.scrollTop || (document.documentElement && document.documentElement.scrollTop);
}
return {
left:scrollX,
top:scrollY
}
})()

在DEMO中各浏览器获取scrollTop,scrollLeft值差异性调用的方式也很方便简单的,只要跟普通的对象调用方式一样.

这个也可以直接用在textarea或div获取scrollTop,scrollLeft上的,只要后面传进一个dom对象即可.
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

La version la plus stable de Win10 La version la plus stable de Win10 Dec 25, 2023 pm 07:58 PM

De nombreux utilisateurs rencontreront des blocages ou des écrans bleus lors de l'utilisation de l'ordinateur. À l'heure actuelle, nous devons trouver la version Win10 la plus stable pour fonctionner. Dans l'ensemble, elle est très facile à utiliser et peut rendre votre utilisation quotidienne plus fluide. La version win10 la plus stable de l'histoire 1. Le véritable système original Win10 peut utiliser des opérations simples. Le système a été optimisé et présente une forte stabilité, sécurité et compatibilité. Les utilisateurs peuvent suivre les étapes pour obtenir la machine parfaite. rationalisé La version de win10 a été strictement rationalisée et de nombreuses fonctions et services inutiles ont été supprimés. Après la rationalisation, le système utilise moins le processeur et la mémoire et fonctionne plus rapidement. 3. Win10 Lite Edition 1909 est installé sur plusieurs ordinateurs avec différents modèles de matériel.

Le Switch2 est-il compatible avec les cartouches Switch ? Le Switch2 est-il compatible avec les cartouches Switch ? Jan 28, 2024 am 09:06 AM

Switch2 est un nouveau modèle annoncé par Nintendo à la Gamescom 2023. Certains joueurs s'inquiètent de savoir s'il y aura des problèmes de compatibilité entre le nouveau modèle et la version précédente de la cartouche. Switch2 est-il compatible avec les cassettes switch ? Réponse : switch2 n'est pas compatible avec les cassettes switch. Introduction des cartouches Switch 2 Selon les informations de la société de chaîne de production de Nintendo, Switch 2 peut utiliser des cartouches de 64 Go. Parce qu'il offre de meilleures performances et prend en charge davantage de chefs-d'œuvre de jeu 3A, il nécessite une plus grande capacité de cartouche. Parce que de nombreux jeux doivent être castrés et compressés avant de pouvoir être insérés dans une cartouche de jeu. De plus, les cartouches Switch ont tendance à copier le contenu du jeu, alors remplacez-les par de nouvelles cartouches.

Win11 prend-il en charge les fonds d'écran dynamiques ? Win11 prend-il en charge les fonds d'écran dynamiques ? Jan 01, 2024 pm 06:41 PM

Comme nous le savons tous, une caractéristique majeure de Win11 est qu'il est livré avec le sous-système Android, qui nous permet d'installer le logiciel Android sans utiliser d'émulateur. Cependant, il existe également le problème du blocage des applications Android Win11. Comment résoudre ce problème. ? Win11 n'est-il pas compatible avec les fonds d'écran dynamiques ? Réponse : Win11 est compatible avec les fonds d'écran dynamiques. S'il ne peut pas être utilisé, c'est peut-être parce que la version du logiciel ou du système est en retard. S'il vient d'être mis à jour, il se peut qu'il soit recouvert par le fond d'écran du système. 1. Si la version du système ou du logiciel est en retard, mettez simplement à jour le système et le logiciel de fond d'écran dynamique. 2. S'il est couvert par le fond d'écran du système, vous pouvez essayer d'ouvrir « Paramètres ». 3. Entrez ensuite les paramètres « Arrière-plan » sous « Personnalisation ». 4. Changez ensuite l'arrière-plan personnalisé en "Image". 5. Une fois la modification terminée, vous pouvez définir le fond d'écran dynamique normalement

Le système Linux est-il compatible avec le logiciel Android ? Le système Linux est-il compatible avec le logiciel Android ? Mar 20, 2024 pm 02:27 PM

Ces dernières années, la popularité du système Android dans le domaine des appareils mobiles a augmenté rapidement et de nombreuses personnes ont commencé à se demander si les applications Android peuvent également être exécutées sur d'autres plates-formes. En tant que système d'exploitation courant, Linux est favorisé par de nombreuses personnes. La question est donc la suivante : le système Linux est-il compatible avec le logiciel Android ? La première chose à préciser est que le système Linux et le système Android ont certaines similitudes dans le noyau. Ce sont tous deux des systèmes d'exploitation basés sur le noyau Linux. Par conséquent, en théorie, le système Linux peut fonctionner.

Comment résoudre l'incompatibilité de d3dx9_43.dll Comment résoudre l'incompatibilité de d3dx9_43.dll Feb 24, 2024 pm 10:06 PM

Comment résoudre l'incompatibilité d3dx9_43.dll Ces dernières années, le développement rapide des ordinateurs et des jeux nous a permis de profiter de plus de divertissement et de commodité. Cependant, parfois lors de l'installation ou de l'exécution de certains programmes, nous pouvons rencontrer des messages d'erreur, tels que "d3dx9_43.dll est incompatible". Dans ce cas, comment devrions-nous résoudre ce problème ? Tout d’abord, comprenons ce que signifie ce message d’erreur. d3dx9_43.dll est un fichier système de DirectX, utilisé dans le système d'exploitation

Introduction à la méthode de paramétrage de win10 compatible avec win7 Introduction à la méthode de paramétrage de win10 compatible avec win7 Jan 03, 2024 pm 05:09 PM

La raison pour laquelle de nombreux amis choisissent encore le système Win7 au lieu du système Win10 est qu'ils ont peur d'une mauvaise compatibilité. En fait, le système Win10 peut désormais définir le mode de compatibilité de Win7. Il vous suffit de modifier les paramètres dans les propriétés. Examinons-le ensemble. Comment rendre Win10 compatible avec Win71 ? Tout d'abord, faites un clic droit sur le programme que nous devons exécuter sous le système Win7, puis ouvrez « Propriétés » 2, puis cliquez sur « Compatibilité » ci-dessus pour accéder à l'onglet de compatibilité. 3. Cochez « Exécuter ce programme en mode de compatibilité » en mode de compatibilité. 4. Sélectionnez ensuite « Windows 7 » dans le menu déroulant ci-dessous. 5. Après avoir terminé, cliquez simplement sur « Appliquer » ou cliquez sur « OK ».

Comment gérer l'incompatibilité des versions d'Eclipse Comment gérer l'incompatibilité des versions d'Eclipse Jan 04, 2024 am 10:29 AM

Que dois-je faire si la version d'Eclipse est incompatible ? [Introduction] En tant qu'outil de développement populaire, Eclipse fournit non seulement des fonctions puissantes et des plug-ins riches, mais possède également des fonctionnalités multiplateformes. Cependant, lorsque vous utilisez Eclipse, vous pouvez parfois rencontrer des problèmes d'incompatibilité de version, ce qui peut entraîner un dysfonctionnement du programme ou des erreurs de compilation. Cet article décrira comment gérer l'incompatibilité des versions d'Eclipse et fournira quelques exemples de code pour résoudre les problèmes de compatibilité courants. [Solution] Mettre à jour Ecl

Guide détaillé pour installer et configurer les points réseau compatibles dans Win11 Guide détaillé pour installer et configurer les points réseau compatibles dans Win11 Jan 09, 2024 pm 02:50 PM

De nombreux utilisateurs de sites Web doivent utiliser l'ancienne version du navigateur lors de la navigation, et la nouvelle version doit ajouter des prises compatibles avant de pouvoir être utilisée. Je vais donc vous proposer aujourd'hui un didacticiel détaillé sur l'ajout de prises compatibles dans Win11. et apprendre. Comment ajouter des prises compatibles dans win11 1. Ouvrez d'abord le navigateur IE dans le système, cliquez sur le petit engrenage dans le coin supérieur droit du navigateur pour entrer dans « Paramètres ». 2. Ensuite, dans le menu des paramètres qui s'ouvre, ouvrez « Paramètres d'affichage de compatibilité ». 3. Entrez l'URL à ajouter dans la zone d'édition sous Ajouter ce site Web, puis cliquez sur « Ajouter ». 4. Enfin, vous pouvez voir le nom de domaine de l'URL ajoutée ci-dessous, et vous pouvez y accéder directement en fermant la fenêtre.

See all articles