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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

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.

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 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.

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 ».

Les programmes compilés par Mingw peuvent-ils fonctionner normalement sous les systèmes Linux ? Les programmes compilés par Mingw peuvent-ils fonctionner normalement sous les systèmes Linux ? Mar 19, 2024 pm 12:03 PM

Les programmes compilés par Mingw peuvent-ils fonctionner normalement sous les systèmes Linux ? De nombreux programmeurs rencontrent souvent un tel problème au cours du processus de développement, à savoir si le programme compilé à l'aide de Mingw sous le système Windows peut fonctionner normalement sous le système Linux. Cet article explorera ce problème en détail et donnera des exemples de code spécifiques. Tout d’abord, nous devons comprendre ce qu’est Mingw et la différence entre celui-ci et les systèmes Linux. Mingw est un environnement de développement sous Windows, utilisé pour compiler Wind

Présentation de la compatibilité entre le système win10 et la version ps Présentation de la compatibilité entre le système win10 et la version ps Dec 30, 2023 pm 06:04 PM

PS est Photoshop, qui est un logiciel de traitement d'image utilisé actuellement par de nombreuses personnes. Avant d'utiliser PS, de nombreux amis peuvent constater que certains PS ne peuvent pas être installés sur le système Win10, soupçonnant qu'il s'agit d'un problème de compatibilité, je vais donc aujourd'hui vous présenter avec quelle version de PS Win10 est compatible. Avec quel PS Win10 est-il compatible ? Réponse : Désormais, presque toutes les versions sont compatibles. Les ordinateurs dotés de configurations supérieures peuvent utiliser les versions les plus récentes. 1. Désormais, la compatibilité de win10 est très bonne. Tant que la configuration est suffisante, elle peut être compatible avec presque toutes les versions de PS. 2. PS a des exigences relativement élevées en matière de configuration informatique, donc si vous avez une configuration élevée, vous pouvez utiliser la dernière version de PS. 3. Si la configuration ne suffit pas, vous pouvez télécharger et utiliser P

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

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

See all articles