js détermine si la barre de défilement a atteint le bas ou le haut des compétences page_javascript

L'exemple de cet article décrit la méthode js pour déterminer si la barre de défilement a atteint le bas ou le haut de la page. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Nous constatons souvent un effet de retour en haut sur de nombreux sites Web. Lorsque notre barre de défilement atteint la position spécifiée, le retour en haut apparaît automatiquement. Nous vous présenterons ici le principe et la méthode. de réaliser cet effet.

Lorsque la zone visible est plus petite que la hauteur réelle de la page, il est déterminé qu'une barre de défilement apparaît, soit :

Copier le code Le code est le suivant :

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) défilement = vrai ;

Pour utiliser document.documentElement , vous devez ajouter la déclaration en tête de page :

Copier le code Le code est le suivant :

En fait, ce code ne fonctionne pas car il ne prend pas en compte un problème, à savoir la bordure du navigateur. Lorsque nous obtenons le offsetHeight de la page, la bordure du navigateur est de 2 pixels, donc clientHeight est toujours. inférieur à offsetHeight en toutes circonstances, ce qui le rend vrai même s'il n'y a pas de barre de défilement, nous devons donc corriger cette erreur. Le code doit être modifié comme ceci, soustraire 4 pixels de offsetHeight, c'est-à-dire :
.

Copier le code Le code est le suivant :

if (document.documentElement.clientHeight < document.documentElement.offsetHeight- 4){
//Exécuter les scripts associés.
>

De plus, nous devons comprendre ici que le code ci-dessus sert à juger la barre de défilement horizontale. Ce que nous devons généralement juger, c'est le défilement vertical. Le code est le suivant :
.

Copier le code Le code est le suivant :

if (document.documentElement.clientWidth < document.documentElement.offsetWidth- 4){
//Exécuter les scripts associés.
>

Pour déterminer si la barre de défilement a été tirée vers le bas de la page, vous pouvez utiliser le code suivant

Copier le code Le code est le suivant :

window.onscroll = function (){
var marginBot = 0;
si (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop document.body.scrollTop)-document.documentElement.clientHeight;
} autre {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
>
si(marginBot<=0) {
//faire quelque chose
>
>

Exemple 2

Je l'ai trouvé en ligne. C'est tout à fait compatible avec les navigateurs. Ce qui est étrange, c'est que je n'ai trouvé aucune information pertinente dans la documentation. Postez le code.

Copier le code Le code est le suivant :

/*******************
* Obtenez la hauteur de la barre de défilement de la fenêtre
******************/
fonction getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    >
    sinon si(document.body)
    {
        scrollTop=document.body.scrollTop;
    >
    retourner scrollTop ;
>

/*******************
* Obtenez la hauteur de la plage visible de la fenêtre
******************/
fonction getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight     >
    d'autre
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    >
    retourner clientHeight;
>
/*******************
* Obtenez la hauteur réelle du contenu du document
******************/
fonction getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
>
  fonction test(){
 if (getScrollTop() getClientHeight()==getScrollHeight()){
  alert("到达底部");
 }autre{
  alert("没有到达底部");
 >
>

Supplément :

DTD déclaré :

IE
document.documentElement.scrollHeight La hauteur de tout le contenu dans le navigateur, document.body.scrollHeight La hauteur de tout le contenu dans le navigateur
document.documentElement.scrollTop La hauteur de la partie de défilement du navigateur, document.body.scrollTop est toujours 0
document.documentElement.clientHeight La hauteur de la partie visible du navigateur, document.body.clientHeight La hauteur de tout le contenu du navigateur

FF
document.documentElement.scrollHeight La hauteur de tout le contenu dans le navigateur, document.body.scrollHeight La hauteur de tout le contenu dans le navigateur
document.documentElement.scrollTop La hauteur de la partie de défilement du navigateur, document.body.scrollTop est toujours 0
document.documentElement.clientHeight est la hauteur de la partie visible du navigateur, document.body.clientHeight est la hauteur de tout le contenu du navigateur

Chrome
document.documentElement.scrollHeight est la hauteur de tout le contenu du navigateur, document.body.scrollHeight est la hauteur de tout le contenu du navigateur
document.documentElement.scrollTop est toujours 0, document.body.scrollTop hauteur de la partie de défilement du navigateur
document.documentElement.clientHeight La hauteur de la partie visible du navigateur, document.body.clientHeight La hauteur de tout le contenu du navigateur

DTD non déclarée :

IE
document.documentElement.scrollHeight est la hauteur de la partie visible du navigateur, document.body.scrollHeight est la hauteur de tout le contenu du navigateur
document.documentElement.scrollTop est toujours 0, document.body.scrollTop hauteur de la partie de défilement du navigateur
document.documentElement.clientHeight vaut toujours 0, document.body.clientHeight est la hauteur de la partie visible du navigateur

FF
document.documentElement.scrollHeight est la hauteur de la partie visible du navigateur, document.body.scrollHeight est la hauteur de tout le contenu du navigateur
document.documentElement.scrollTop est toujours 0, document.body.scrollTop est la hauteur de la partie de défilement du navigateur
document.documentElement.clientHeight est la hauteur de tout le contenu du navigateur, document.body.clientHeight est la hauteur de la partie visible du navigateur

Chrome
document.documentElement.scrollHeight est la hauteur de la partie visible du navigateur, document.body.scrollHeight est la hauteur de tout le contenu du navigateur
document.documentElement.scrollTop est toujours 0, document.body.scrollTop est la hauteur de la partie de défilement du navigateur
document.documentElement.clientHeight est la hauteur de tout le contenu du navigateur, document.body.clientHeight est la hauteur de la partie visible du navigateur

La hauteur de tout le contenu du navigateur est la hauteur de tout le cadre du navigateur, y compris la somme des hauteurs de la partie où la barre de défilement est déployée, de la partie visible et de la partie cachée en bas.

La hauteur de la partie défilée du navigateur est la hauteur de la barre de défilement, qui est la hauteur du haut visuel depuis le haut de l'objet entier.
Après avoir compris les paramètres ci-dessus, nous pouvons créer un effet de défilement compatible avec les navigateurs IE, FF et Chrome.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.