Frage Internet Explorer Jumpy Scrollen


Ich habe diesen Code, um ein Überschriftselement an der Spitze eines anderen Elements zu halten, das scrollt.

Es funktioniert perfekt in Firefox und Google Chrome, aber in IE ist es quälend jumpy. Der Code selbst ist sehr einfach und ich kann nicht darüber nachdenken, wie ich ihn verbessern könnte.

In Chrome und Firefox sitzt die Überschrift immer ganz oben auf der Spitze, aber in IE springt sie herum wie ein kleines Kind, das sich die Tüte Zucker geholt hat.

Ich kann das HTML-Layout wegen der JQueryUI  sortable Funktionalität, die ich verwende

Wie auch immer, hier ist der Code:

http://jsfiddle.net/0va4dn0q/8/

$('.container').scroll( function() {
    var fromTop = $(this).scrollTop(),
        Header = $(this).find('.header');
    Header.css('margin-top', fromTop + 'px');
});

$('.sortable').sortable({
    connectWith: '.sortable',
    placeholder: 'ui-state-highlight'
});
div {
   width:300px; 
}
.sortable {
    float:left;
    margin:3px solid red;
    min-height:200px;
}
.container {
    height:200px;
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
    cursor:move;
}
.header {
    position:absolute;
    top:0;
    background-color:orange;
    height:20px;
    text-align:center;
    line-height:20px;
}
.main {
    padding-top:20px;
    color:white;
    background-color:black;
    height:1000px;
}
.ui-state-highlight {
    height:200px;   
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="sortable">
    <div class="container">
        <div class="header">Header 1</div>
        <div class="main">hello<br/>hello<br/>hello<br/></div>
    </div>
    <div class="container">
        <div class="header">Header 2</div>
        <div class="main">bye<br/>bye<br/>bye<br/></div>
    </div>
</div>
<div class="sortable">
    <div class="container">
        <div class="header">Header 3</div>
        <div class="main">splurge<br/>splurge<br/>splurge<br/></div>
    </div>
    <div class="container">
        <div class="header">Header 4</div>
        <div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div>
    </div>
</div>


5
2018-06-04 09:53


Ursprung


Antworten:


Können wir die HTML-Struktur INSIDE im sortierbaren Container ändern? Ich möchte wirklich die Bildlaufleiste innerhalb der .main div, so ist es neben dem Bereich, der tatsächlich scrollt.

Um dies zu tun, habe ich eine neue Hauptfenster-Klasse erstellt, gab es eine Höhe von 180px (200 - 20 für den Header), bewegte den Überlauf aus dem Container, und entfernte den 20px Padding von Haupt, und es schien zu funktionieren:

$('.sortable').sortable({
    handle: '.header',
    connectWith: '.sortable',
    placeholder: 'ui-state-highlight'
});
div {
   width:300px; 
}
.sortable {
    float:left;
    margin:3px solid red;
    min-height:200px;
}
.container {
    height:200px;
    overflow-x:hidden;
    position:relative;
}
.main-window {
    height:180px;
    overflow-x:hidden;
    overflow-y:scroll;
}
.header {
    cursor:move;
    background-color:orange;
    height:20px;
    text-align:center;
    line-height:20px;
}
.main {
    color:white;
    background-color:black;
    height:1000px;
}
.ui-state-highlight {
    height:200px;   
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="sortable">
    <div class="container">
        <div class="header">Header 1</div>
        <div class="main-window">
            <div class="main">hello<br/>hello<br/>hello<br/></div>
        </div>
    </div>
    <div class="container">
        <div class="header">Header 2</div>
        <div class="main-window">
            <div class="main">bye<br/>bye<br/>bye<br/></div>
        </div>
    </div>
</div>
<div class="sortable">
    <div class="container">
        <div class="header">Header 3</div>
        <div class="main-window">
            <div class="main">splurge<br/>splurge<br/>splurge<br/></div>
        </div>
    </div>
    <div class="container">
        <div class="header">Header 4</div>
        <div class="main-window">
            <div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div>
        </div>
    </div>
</div>

Und neben der Tatsache, dass die Bildlaufleisten jetzt unter den Headern sind und die Headern jetzt bis zum nächsten reichen, sollte funktionieren. Sie haben vielleicht ein wenig Styling-Cleanup, aber die Bildlaufleisten verhalten sich jetzt wie gewünscht ohne JavaScript.


4
2018-06-10 03:36



Der Header sollte außerhalb des Containers sein, während der Container einen Rand von 20px haben sollte, siehe Geige

 <div id="header">Header</div>
 <div id="container">
    <div id="main"></div>
 </div>

5
2018-06-04 10:13



Du könntest es einfach benutzen position: fixed und setze das nicht top Eigenschaft, so dass es relativ fixiert ist.

so was:

https://jsfiddle.net/ava4dn0q/42/


1
2018-06-12 17:28