web-dev-qa-db-fra.com

Table d'en-tête fixe, lors du défilement à l'aide de scintillements Jquery dans IE11 (Internet Explorer) en cliquant sur l'icône de la barre de défilement div, cliquez sur.

FIXED HEADER TABLE ____Lorsque vous cliquez sur l'icône de la barre de défilement dans ie11 scintille lorsque vous utilisez le positionnement car je ne peux pas modifier la structure car elle provient de différentes sources et pénètre dans la structure du corps de la table.

<tbody><tr></tr><tr></tr></tbody>

voici le violon attaché qui fonctionne très bien en chrome mais lorsque je m'enregistre, c'est-à-dire qu'il scintille horriblement lorsque vous cliquez sur l'icône de barre de défilement verticale en bas ou au-dessus de l'icône

Toute solution CSS ou HTML est également acceptable jusqu’à ce qu’il n’y ait pas de changement dans la structure HTML. 

DEMO Js Fiddle Demo enter image description here JQUERY

   $(document).ready(function() {
$('#theDiv').on('scroll', function () { 
                $('#headerRow td,#headerRow th').css({'position':'relative','background':'red','top':$('#theDiv').scrollTop()-1});
});
    });
javascriptjqueryhtmlcss
15
Nadeemmnn Mohd

Comme Ie ne prend pas en charge la propriété de dépassement de capacité pour les éléments de groupe de tables. Nous pouvons donc ajouter une solution de contournement pour prendre en charge le comportement requis. Ajoutez ce css à votre violon et essayez-le.

tbody{display:block;height:auto;}

Cela fera disparaître votre scintillement dans les anciennes versions. Bien que ce soit un bidouillage pour le faire fonctionner, mais il n'y a pas d'autre moyen de css pur. Pour plus de détails et d’explications, vous pouvez lire ce lien . Le violon mis à jour est ici . Mais comme vous me l’avez dit, le scintillement ne disparaît pas. Une solution de contournement existe, mais elle nécessite une modification des paramètres. Accédez aux options Internet, naviguez jusqu'à Avancé et faites défiler jusqu'à la section de navigation qui s'affiche, puis décochez "Activer le défilement régulier" . Mais je ne sais pas si cela répond à vos besoins ou non

1
breakit

Tout d’abord, nous encapsulons #theDiv dans un #theDivWrap (avec jQuery) et utilisons le css pour le styler ...

L'idée est de dupliquer la ligne d'en-tête dans une nouvelle division ajoutée à #theDivWrap via JS

Parcourez maintenant les éléments d'en-tête de table et créez un en-tête de style similaire, basé sur la division, qui viendra s'ajouter à la table et sera préfixé par #theDivWrap et y restera indéfiniment, même en cas de défilement, car le bouclage n'est pas automatique ...

https://jsfiddle.net/5dqnumh6/39/

Ajustez le bas de la marge négative de .headerRow pour répondre à vos besoins;)

1
shramee

Cela a été noté comme étant un bogue IE11 et, selon cette autre SO question de 2014 , apparaît dans les conditions suivantes:

IE 11 scintillement/saccades/retard pour un élément à position fixe Lors du défilement:

  1. Si vous avez un "débordement: auto;" sur l'élément de conteneur parent, supprimez-le. 
  2. Supprimer la pièce jointe: corrigé à partir de l'élément de position fixe . 

  3. Supprimez border-radius de l'élément à position fixe (mobile IE uniquement).

    (Réponse acceptée par @Adamy)

Enlever le débordement automatique de votre code enlève tout son sens, donc ce n’est pas la meilleure solution ici, et les autres ne s’appliquent pas. Cependant, ce qui semble fonctionner (selon ce bogue MS Connect ) est quelques modifications HTML, séparant la ligne d’en-tête et ajoutant une fonction de défilement personnalisée au corps de la table. Cette page JsFiddle (aimablement fournie par les personnes qui ont répondu au bogue MS) a un exemple de travail: 

https://jsfiddle.net/84y0vtyx/

(Incluant seulement une partie de l'exemple avec un commentaire pertinent. Une explication complète nécessite de revoir l'exemple de JsFiddle.) 

/* Only WinIE will fire this function. All other browsers scroll the TBODY element and not the DIV */
/* This is to hide the SELECT elements from scrolling over the fixed Header. WinIE only.           */
/* toggleSelectBoxes added on 2005-01-28 */
/* Terence Ordona, portal[AT]imaputz[DOT]com         */


window.onload = function() { addIEonScroll(); }
0
Cahit

J'utilise celui-ci mon site:

https://raw.githubusercontent.com/jmosbech/StickyTableHeaders/master/js/jquery.stickytableheaders.min.js

Il suffit de le charger dans votre section <head></head> de la page et il fera flotter l'en-tête de toute table chargée sur cette page. Il est multi-navigateur et fait le travail sans astuces supplémentaires, il suffit de plug & play.

0
Ivan

Bonjour, voici ma mise à jour basée sur votre commentaire. J'ai copié la partie HTML de votre js Fiddle et viens d’ajouter cette balise de style au-dessus de la table div et cela fonctionne parfaitement dans Microsoft Edge et d'autres navigateurs sans Jquery requis:

<style>

 #headerRow
 {  
   position: fixed !important;
   top:0px;
   background:Red;
 }

</style>

////VIEUX

Je vous prie de m'excuser, car vous avez mentionné que vous ne pouvez pas modifier la structure du tableau html qui s'affiche, mais consultez ma vieille réponse ci-dessous, que j'ai écrite sans cette considération. Pouvez-vous envisager d'utiliser css pour parcourir la table fixe qui descend et appliquer une position fixe à la ligne d'en-tête supérieure? J'ai lu que vous pouvez donner une position fixe et une couleur d'arrière-plan à une ligne du tableau afin qu'elle reste fixe et que l'arrière-plan empêche le texte de se chevaucher Comment rendre la ligne du tableau fixe en haut

Vous pouvez utiliser css pour sélectionner la rangée supérieure du tableau: Css:

 table tr:first-child
 {  
   position: fixed;
   top:0px;
   background:#FFF;
 }

/// ancienne réponse:

S'il vous plaît, permettez-moi de vous suggérer d'oublier d'utiliser un événement de défilement de document et de créer un en-tête avec une position absolue s'il s'agit d'un div avec un défilement à débordement ou une position fixe s'il ne s'agit que de rester fixe lorsque la fenêtre défile. vous pouvez spécifier des largeurs pour vos colonnes afin que l'en-tête fixe s'aligne. alors quelque chose dans ce sens (je viens de taper sur mon téléphone): 

 <table style="position:fixed; width:100% ">
    <tr>
       <th width="50%">
        Test1
       </th>
       <th width="50%">
         Test2
        </th>
    </tr>
 </table>
 <table style="margin-top:25px; width:100% ">
      <tr>
          <td width="50%">
             a
          </td>
          <td width="50%">
           b
          </td>
          </tr>
          <tr>
          <td width="50%">
             c
           </td>
         <td width="50%">
          d
         </td>
       </tr>
   </table>

Surtout si nous parlons ici de compatibilité entre navigateurs: plus la mise en oeuvre html/css est simple et élémentaire, mieux c'est. Css nous a fourni une classe fixe. Il n'est pas nécessaire d'utiliser jQuery pour regarder vos documents défiler.

0
Harry