كيف يمكنني تمرير صف من الجدول إلى العرض (element.scrollintoView) باستخدام jQuery؟

StackOverflow https://stackoverflow.com/questions/1805808

  •  05-07-2019
  •  | 
  •  

سؤال

أقوم بإضافة صفوف ديناميكيًا إلى جدول باستخدام jQuery.ال table هو داخل أ div الذي لديه overflow:auto مما يسبب شريط التمرير العمودي.

أريد الآن التمرير التلقائي للحاوية الخاصة بي div إلى الصف الأخير.ما هو إصدار jQuery tr.scrollintoView()?

هل كانت مفيدة؟

المحلول 

var rowpos = $('#table tr:last').position();

$('#container').scrollTop(rowpos.top);

وينبغي أن تفعل خدعة!

نصائح أخرى

وهذا التالية يعمل بشكل أفضل إذا كنت بحاجة للتمرير إلى عنصر التعسفي في القائمة (وليس دائما إلى أسفل): 

function scrollIntoView(element, container) {
  var containerTop = $(container).scrollTop(); 
  var containerBottom = containerTop + $(container).height(); 
  var elemTop = element.offsetTop;
  var elemBottom = elemTop + $(element).height(); 
  if (elemTop < containerTop) {
    $(container).scrollTop(elemTop);
  } else if (elemBottom > containerBottom) {
    $(container).scrollTop(elemBottom - $(container).height());
  }
}

البرنامج المساعد الذي يتم تمريره (مع الرسوم المتحركة) فقط عند الحاجة

لقد كتبت أ البرنامج المساعد مسج هذا يفعل بالضبط ما هو مكتوب على العلبة (وأيضًا بالضبط ما تحتاجه).والشيء الجيد هو أنه سيتم تمرير الحاوية فقط عندما يكون العنصر متوقفًا بالفعل.وإلا لن يتم تنفيذ التمرير.

إنه يعمل بهذه السهولة:

$("table tr:last").scrollintoview();

يقوم تلقائيًا بالعثور على أقرب سلف قابل للتمرير يحتوي على محتوى زائد ويعرض أشرطة التمرير.فإذا كان هناك سلف آخر معه overflow:auto ولكن ليس للتمرير سيتم تخطيها.بهذه الطريقة لا تحتاج إلى توفير عنصر قابل للتمرير لأنك في بعض الأحيان لا تعرف أي عنصر قابل للتمرير (أنا أستخدم هذا المكون الإضافي في موقع Sharepoint الخاص بي حيث يكون المحتوى/الرئيسي مستقلاً عن المطور لذا فهو خارج عن إرادتي - قد يتغير HTML عندما يكون الموقع جاهزًا للعمل، يمكن للحاويات القابلة للتمرير).

وأبسط من ذلك بكثير: 

$("selector for element").get(0).scrollIntoView();

وإذا إرجاع أكثر من عنصر واحد في محدد، والحصول على (0) سوف تحصل العنصر الأول فقط.

وهذا المثال runnable يوضح كيفية استخدام scrollIntoView () الذي يتم دعمه في جميع المتصفحات الحديثة: https://developer.mozilla.org/en-US /docs/Web/API/Element.scrollIntoView#Browser_Compatibility

ويستخدم المثال التالي مسج لتحديد عنصر مع #yourid. 

$( "#yourid" )[0].scrollIntoView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p id="yourid">Hello world.</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>

var elem=jQuery(this);
elem[0].scrollIntoView(true);

إذا كنت ترغب فقط للتمرير، يمكنك استخدام طريقة scrollTop مسج ل. http://docs.jquery.com/CSS/scrollTop

و 

var table = jQuery( 'table' );
table.scrollTop( table.find( 'tr:last' ).scrollTop() );

وشيء من هذا القبيل ربما؟

ولقد وجدت هذه الحالة (تجاوز div> الجدول> tr> الدفتيريا) التي التمرير إلى الوضع النسبي للآر لا يعمل. بدلا من ذلك، كان لي لتمرير الحاوية سعة (شعبة) باستخدام scrollTop إلى <tr>.offset().top - <table>.offset().top. على سبيل المثال: 

$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )

ونفس من فوق مع تعديل طفيف 

function focusMe() {
       var rowpos = $('#FocusME').position();
        rowpos.top = rowpos.top - 30;
        $('#container').scrollTop(rowpos.top);
    }
<html>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<body>
    <input type="button" onclick="focusMe()" value="focus">
    <div id="container" style="max-height:200px;overflow:scroll;">
        <table>
            <tr>
                <td>1</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td></td>
            </tr>
            <tr>
                <td>6</td>
                <td></td>
            </tr>
            <tr>
                <td>7</td>
                <td></td>
            </tr>
            <tr>
                <td>8</td>
                <td></td>
            </tr>
            <tr>
                <td>9</td>
                <td></td>
            </tr>
            <tr id="FocusME">
                <td>10</td>
                <td></td>
            </tr>
            <tr>
                <td>11</td>
                <td></td>
            </tr>
            <tr>
                <td>12</td>
                <td></td>
            </tr>
            <tr>
                <td>13</td>
                <td></td>
            </tr>
            <tr>
                <td>14</td>
                <td></td>
            </tr>
            <tr>
                <td>15</td>
                <td></td>
            </tr>
            <tr>
                <td>16</td>
                <td></td>
            </tr>
            <tr>
                <td>17</td>
                <td></td>
            </tr>
            <tr>
                <td>18</td>
                <td></td>
            </tr>
            <tr>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>20</td>
                <td></td>
            </tr>
        </table>
    </div>
</body>

</html>

$( "#yourid" )[0].scrollIntoView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p id="yourid">Hello world.</p>
<p>..</p>
<p>..</p>
<p>..</p>
<p>..</p>

وأنا لا يمكن أن تضيف تعليق على الجواب أبهيجيت راو أعلاه، حتى إنني أقدم هذا كإجابة إضافية.

وأنا بحاجة إلى عمود التمرير الجدول في طريقة العرض على طاولة واسعة، لذلك أضفت التمرير ميزات اليسار في وظيفة. كما ذكر شخص ما، فإنه يقفز عندما مخطوطات، لكنه يعمل لأغراض بلدي. 

function scrollIntoView(element, container) {
  var containerTop = $(container).scrollTop();
  var containerLeft = $(container).scrollLeft();
  var containerBottom = containerTop + $(container).height();
  var containerRight = containerLeft + $(container).width();

  var elemTop = element.offsetTop;
  var elemLeft = element.offsetLeft;
  var elemBottom = elemTop + $(element).height();
  var elemRight = elemLeft + $(element).width();

  if (elemTop < containerTop) {
    $(container).scrollTop(elemTop);
  } else if (elemBottom > containerBottom) {
    $(container).scrollTop(elemBottom - $(container).height());
  }

  if(elemLeft < containerLeft) {
    $(container).scrollLeft(elemLeft);
  } else if(elemRight > containerRight) {
    $(container).scrollLeft(elemRight - $(container).width());
  }
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top