ScrollIntoView для строки таблицы, не работающей в IE 8 - PullRequest
Новая
       12

ScrollIntoView для строки таблицы, не работающей в IE 8

2 голосов
/ 04 марта 2010

Может кто-нибудь объяснить, почему следующее не работает в IE8. По сути, я просто пытаюсь прокрутить строку таблицы в представление, содержащееся в переполненном DIV. Код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>  
<script language="javascript" src='scripts/jquery-1.3.2.js'></script>
<script language="javascript" src='scripts/jquery.scrollTo-1.4.2.js'></script>      
<stylesheet type="text/css">
    table {border-collapse: collapse;}
    th, td {margin: 0; padding: 0.25em 0.5em;}

    html, body 
    {
        height: 100%;
        width:100%;
        overflow:hidden;
    }

    body  
    {
        height:100%;
        overflow:hidden;
    } 

    #scrollpanel
    {
        height:100px;
        overflow-x:hidden;
        overflow-y:scroll;
        width:200px
    }

</style>
  <script>
    $(document).ready(function()
    {       
        var scrollToDiv = document.getElementById("scrollToDiv");
        scrollToDiv.scrollIntoView(true); // Works

        var scrollToRow = document.getElementById('scrollToRow');
        scrollToRow.scrollIntoView(true); // Wont Work in IE8

        //$.scrollTo("#scrollToRow"); // Using JQuery Scroll To Lib doesn't work
        //location.hash = 'scrollToAnchor'; // this work
    });

</script
 </head>
 <body> 
    <div id="scrollpanel">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div id="scrollToDiv">Scroll Here</div>
</div>
<br>
<div id="scrollpanel">
    <table id="tblRI"/>
        <tbody id="tbody1">
            <tr id="tr1">
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr id="tr2">
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr id="tr3">
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr id="tr4">
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr id="scrollToRow">
                <td><A NAME="scrollToAnchor">ScrollHere</A></td>
                <td>Data 02-02</td>
            </tr>
        </tbody>
    </table>
</div>
  <body>
 </html>

Ну, кажется, ScrollIntoView не работает для элементов таблицы строк. Если я переключусь на использование селектора столбцов, он будет работать нормально. 

<tr id="scrollToRow">
   <td id="tdScrollToColumn"><A NAME="scrollToAnchor">ScrollHere</A></td>
   <td>Data 02-02</td>
</tr>

$(document).ready(function()
{       
  var scrollToDiv = document.getElementById("scrollToDiv");
  scrollToDiv.scrollIntoView(true); // Works

  var scrollToRow = document.getElementById('scrollToColumn');
  scrollToRow.scrollIntoView(true); // Works in IE8

  //$.scrollTo("#scrollToRow"); // Using JQuery Scroll To Lib doesn't work
  //location.hash = 'scrollToAnchor'; // this work
 });

Ответы [ 2 ]

2 голосов
/ 18 сентября 2013

Немного опоздал на ответ, но недавно я столкнулся с похожей проблемой с IE8, и я решил поделиться этим, чтобы помочь другим с подобной проблемой. В проекте, над которым я работал, была попытка избежать использования библиотеки jQuery, так что вот решение не из jQuery.

По сути, я реализовал обходной путь, установив свойство scrollTop со значением, которое мне нужно, чтобы оно прокручивалось до соответствующей строки. Значение должно быть рассчитано. Это решение было нацелено на проблему вертикальной прокрутки.

Код подробно описан ниже. Обратите внимание, что вспомогательная функция BrowserIsIE8() может быть легко найдена через поиск в WWW.

Рисунок 1: Основной телефонный код 

var direction = determineRowScrollDirection(parentPane, row);
scrollRowIntoView(parentPane, row, direction);

Рисунок 2: Вспомогательные функции 

// Determines the direction to scroll to bring the row into view.
function determineRowScrollDirection(parentPane, row)
{
  var parentTop = parentPane.scrollTop;
  var parentBottom = parentTop + parentPane.clientHeight;

  var childTop = row.offsetTop;
  var childBottom = childTop + row.clientHeight;

  var direction = 0; // Row is already in view, no scrolling required.

  if (parentTop > childTop)
  {
    direction = -1;    // Require scrolling up.
  }
  else if (parentBottom < childBottom)
  {
    direction = 1;    // Require scrolling down.
  }

  return direction;
}    

//  Scroll the pane in the relevant direction to bring the row into view
function scrollRowIntoView(parentPane, row, direction)
{
  var distance = 0;

  if (BrowserIsIE8() && direction != 0)
  {
    // scrollIntoView() is broken under ie8 so we need to do it this way.
    distance = calculateScrollTopDistance(row, direction);
    parentPane.scrollTop = distance;
  }
  else
  {
    // If scroll in top direction ...
    if (direction == -1)
    {
      row.scrollIntoView(true);
    }
    else if (direction == 1) // Scroll in bottom direction.
    {
      row.scrollIntoView(false);
    }
  }
}    

//  Calculates the distance required to bring a row into view.
function calculateScrollTopDistance(parentPane, row, direction)
{
  var distance = 0;
  if (direction === -1) // upwards scroll
  {
    distance = row.offsetTop;
  }
  else if (direction === 1) // downwards scroll
  {
    var paddingLength = parentPane.clientHeight - row.clientHeight;
    distance = row.offsetTop - paddingLength;    
  }

  return distance;
}
1 голос
/ 26 мая 2011

Это не имеет ничего общего ни с javascript, ни с jquery. Это ошибка IE!

Вы можете легко проверить это, но просто попытаться ввести в URL браузера хэш одного из ваших tr.

Предположим, вы сохранили код в своем вопросе (вы можете удалить JS, это не проблема JS) в файле с именем page.html.

Попробуйте перейти на такую ​​страницу, введя этот URL page.html#tr3

Вы увидите, что все браузеры будут прокручиваться до указанной строки таблицы, но IE не будет (проверено IE7 и IE8) .

Возможный обходной путь - поместить идентификатор в 1-ю TD ячейку каждой строки (поэтому, используя селектор столбцов, он работает, как вы сказали в своем вопросе).

Просто еще одно дерево триггера Microsoft! (Забавно, они только что сказали, что выйдут с W8, им лучше исправить все дерьмо, которое есть в бесполезном браузере, который они предоставляют) .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...