इंटरनेट एक्सप्लोरर जम्पी स्क्रॉलिंग

Question

मेरे पास स्क्रॉल करने वाले किसी अन्य तत्व के शीर्ष पर एक शीर्षक तत्व रखने के लिए यह कोड है।

यह फ़ायरफ़ॉक्स और Google क्रोम में पूरी तरह से काम करता है हालांकि आईई में यह बेहद अजीब है। कोड स्वयं बहुत ही सरल है और मैं नहीं सोच सकता कि इसे संभावित रूप से कैसे सुधारें।

क्रोम और फ़ायरफ़ॉक्स में शीर्षक शीर्ष पर स्थायी रूप से शीर्ष पर बैठता है, हालांकि आईई में यह चीनी के बैग को पकड़ने वाले छोटे बच्चे की तरह कूदता है।

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>

Answer 1

हम sortable कंटेनर के अंदर HTML संरचना बदल सकते हैं? मैं वास्तव में .main div के अंदर स्क्रॉलबार प्राप्त करना चाहता हूं, इसलिए यह उस क्षेत्र के बगल में है जो वास्तव में स्क्रॉल करता है।

ऐसा करने के लिए, मैंने एक नई मुख्य-विंडो कक्षा बनाई, इसे 180px (हेडर के लिए 200 - 20) की ऊंचाई दी, कंटेनर से ओवरफ़्लो स्थानांतरित कर दिया, और 20px पैडिंग को मुख्य से हटा दिया, और ऐसा लगता है काम:

$('.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>

और, तथ्य यह है कि स्क्रॉलबार हेडर नीचे अब कर रहे हैं और हेडर अब अगले एक करने के लिए सभी तरह का विस्तार करने के अलावा, काम करना चाहिए। आपके पास कुछ स्टाइलिंग क्लीनअप हो सकता है या नहीं हो सकता है, लेकिन स्क्रॉलबार अब कार्य करते हैं जैसे आप उन्हें जावास्क्रिप्ट के बिना चाहते हैं।

Answer 2

:

मैं HTML लेआउट क्योंकि JQueryUIsortable कार्यक्षमता की मैं

वैसे भी उपयोग कर रहा हूँ नहीं बदल सकते, यहाँ कोड है हेडर कंटेनर के बाहर होना चाहिए, जबकि कॉन tainer 20px के एक मार्जिन टॉप होनी चाहिए, को देखने के fiddle

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

Answer 3

आप केवल position: fixed का उपयोग कर सकते हैं और top संपत्ति सेट नहीं करते हैं ताकि यह अपेक्षाकृत तय हो।

इस तरह:

https://jsfiddle.net/0va4dn0q/42/