Google क्रोम में बड़ी (आईएसएच) एचटीएमएल तालिका का सुस्त स्क्रॉल व्यवहार

मैं स्क्रॉलबार के साथ एक बड़ी HTML तालिका (लगभग 5000 पंक्तियां) बनाने की कोशिश कर रहा हूं और इसलिए मैंने उस तालिका को <div> के अंदर डालने के बारे में सोचा था जिसे मैं प्रारूपित कर सकता था। कृपा।Google क्रोम में बड़ी (आईएसएच) एचटीएमएल तालिका का सुस्त स्क्रॉल व्यवहार

यह फ़ायरफ़ॉक्स 47 में और IE 11 में अच्छी तरह से काम करता है, लेकिन अगर मैं सिर्फ दस्तावेज़ के मुख्य भाग तालिका जोड़ने क्रोम में स्क्रॉल पर एक सुस्त व्यवहार है 59.

WORKING DEMO

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test page</title> 
    </head> 

    <body> 
     <div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div> 
     <script> 
      let table = '<table style="table-layout: fixed; width: 3000px">'; 
      table += '<thead>'; 
      table += '<tr>'; 
      for(let i=0; i < 30; i++) { 
       table += '<th style="width: 100px">#' + i +'</th>'; 
      } 
      table += '</tr>'; 
      table += '</thead>'; 
      table += '<tbody>'; 
      for(let i=0; i < 5000; i++) { 
       table += '<tr>'; 
       for(let j=0; j < 30; j++) { 
        table += '<td>r: '+ i +' || c: '+ j +'</td>'; 
       } 
       table += '</tr>'; 
      } 
      table += '</tbody>'; 
      table += '</table>'; 
      document.getElementById('test').innerHTML = table; 
     </script> 
    </body> 

</html>

हालांकि, मेरे द्वारा परीक्षण किए गए 3 ब्राउज़रों में स्क्रॉल व्यवहार चिकनी है (लेकिन मैं अपने स्थानीय देव सर्वर में कोड चलाते समय केवल इस व्यवहार को देख सकता हूं; यदि मैं जेएसएफडल में दस्तावेज़ निकाय में टेबल जोड़ता हूं तो क्रोम के आलसी व्यवहार फिर से दिखाई देता है) ।

मेरा प्रश्न यह है कि क्रोम के इस सुस्त व्यवहार के कारण क्या हो सकता है और मैं एक आसान स्क्रॉलिंग टेबल प्राप्त करने के लिए क्या कर सकता हूं?

* संपादित करें: मैंने को <td> से कोडब्लॉक में हटा दिया है क्योंकि मैंने फिल्ड में ऐसा किया है। मैं उस शैली के साथ प्रयोग कर रहा था क्योंकि मैंने देखा है कि तालिका तत्वों को तुलनात्मक रूप से स्थानांतरित करते समय आईई स्क्रॉल पर सुस्त हो जाता है। मेरा अंतिम लक्ष्य एक निश्चित/जमे हुए हेडर के साथ एक बड़ी HTML तालिका बनाना है जिसमें बड़ी संख्या में पंक्तियों वाला एक स्क्रोल करने योग्य निकाय है।

स्रोत

2017-07-17 Moaning Neighbors

क्रोम (64) के साथ एक ही समस्या हो रही है, वहाँ एफएफ और एज के साथ कोई समस्या नहीं है, जबकि। हालांकि, बाहरी div में "अतिप्रवाह: स्क्रॉल" जोड़ना - जैसे कि आपके उदाहरण में - समस्या हल हो गई। वैसे भी: slickgrid पर एक नज़र डालें, शायद आप जो खोज रहे हैं। –

तालिका में transform: translate3d(0, 0, 0) जोड़ने का प्रयास करें। एक उदाहरण नीचे दिया गया है। हालांकि, यह चाल पुरानी हो रही है। इसके बारे में पोस्टिंग पहले से ही 2012 तक पहुंच गई है। उदाहरण के लिए, this posting देखें।

वर्तमान में, ब्राउज़र [...] हार्डवेयर त्वरण के साथ जहाज; वे केवल इसका उपयोग करते हैं जब उन्हें संकेत मिलता है कि एक डीओएम तत्व इससे लाभान्वित होगा। सीएसएस के साथ, सबसे मजबूत संकेत यह है कि एक 3 डी परिवर्तन एक तत्व के लिए लागू किया जा रहा है।

मेरी कंपनी में, हम इसे लगभग हर बड़ी सूची के लिए उपयोग करते हैं। ज्यादातर, यह ठीक काम करता है। एक और समाधान वर्चुअलाइजेशन होगा।

let table = '<table style="table-layout: fixed; width: 3000px">'; 
 
table += '<thead>'; 
 
table += '<tr>'; 
 

 
for(let i=0; i < 30; i++) { 
 
    table += '<th style="width: 100px">#' + i +'</th>'; 
 
} 
 

 
table += '</tr>'; 
 
table += '</thead>'; 
 
table += '<tbody>'; 
 

 
for(let i=0; i < 5000; i++) { 
 
    table += '<tr>'; 
 
    for(let j=0; j < 30; j++) { 
 
    table += '<td>r: '+ i +' || c: '+ j +'</td>'; 
 
    } 
 
    table += '</tr>'; 
 
} 
 

 
table += '</tbody>'; 
 
table += '</table>'; 
 
document.getElementById('test').innerHTML = table; 
 
document.getElementById('test2').innerHTML = table;

#test { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
}

<h2>With translate3d</h2> 
 
<div style="width: 400px; height: 300px; overflow: scroll;" id="test"></div> 
 
<h2>Without translate3d</h2> 
 
<div style="width: 400px; height: 300px; overflow: scroll;" id="test2"></div>

(या full snippet)

स्रोत

2017-07-18 09:08:24 SVSchmidt

देरी के लिए खेद है, मैं वर्चुअलाइजेशन के बारे में पढ़ रहा हूं और मैं इसे सही ढंग से कार्यान्वित करने की कोशिश कर रहा हूं। यह मेरे दस्तावेज़ प्रदर्शन में एक बड़ा अंतर बनाता है। यहां एक [** वर्किंग डेमो **] है (https://jsfiddle.net/ddqw6tg3/3/)। फिर भी मेरा स्प्रेडशीट तत्व केवल स्क्रॉलबार को ड्रैग करता है या यदि वह निश्चित कॉलम (डेमो में पहले 10) को घुमाने के दौरान मूसहेल का उपयोग करता है तो केवल सुचारू रूप से स्क्रॉल करता है। लेकिन यह व्यवहार मैंने परीक्षण किए गए 3 ब्राउज़र में संगत नहीं है। केवल क्रोम mousewheel के साथ एक चिकनी स्क्रॉल की अनुमति देता है। –

मुझे खेद है, लेकिन मुझे दो कारणों से इसे कम करना होगा: 1) आपके उत्तर में आप कह रहे हैं "ट्रांसफॉर्म जोड़ने का प्रयास करें: अनुवाद 3 डी (0, 0, 0) टी बी बी ई में।"। लेकिन दोस्त, आप इसे टेबल के मूल div में जोड़ रहे हैं! (कहीं से कॉपी किया गया है?) 2) ट्रांसफॉर्म नहीं कर रहा है, ओवरफ्लो: स्क्रॉल है (कम से कम क्रोम 64 के साथ)। –

Google क्रोम में बड़ी (आईएसएच) एचटीएमएल तालिका का सुस्त स्क्रॉल व्यवहार

उत्तर

संबंधित मुद्दे