фокусируемый прокручиваемый div в позицию

Question

фокусируемый прокручиваемый div в позицию

0

У меня есть таблица в div, как показано ниже:

<div class="posts" style="height: 800px; width:330px; overflow:scroll;" >
         <table class="price" id="price" cellpadding="10px" border="1">
                // some stuff    

         </table>
</div>

Я хочу сфокусировать div для прокрутки до определенной строки таблицы с помощью Javascript или jQuery. Таким образом, пользователь увидит эту строку в середине блока div, если вызывается функция.

Как я могу это сделать? Благодарю!

michael 22 окт. 2013, в 03:54

Источник

Теги:

javascript

jquery

html

css

2 ответа

1

В основном вы получаете ссылку на ячейку (<td>) или строку (<tr>), которую вы хотите прокрутить. Затем вы вызываете метод scrollIntoView этого элемента.

Т.е.

var tgtElement = document.getElementById('idOfDesiredRowOrCell');
tgtElement.scrollIntoView();

Вот краткий пример, обратите внимание, что я просто размещаю нужную строку по номеру - вы, скорее всего, захотите выбрать свой целевой элемент по-разному. Кроме того, обратите внимание, что создано 20 строк, поэтому диапазон допустимого ввода - [0..19]. Выбор 19 будет прокручиваться до тех пор, пока не появится строка 19, хотя она находится внизу двоего, а не сверху. Я полагаю, вы могли бы добавить некоторые <br> элементов после таблицы, если вы действительно должны были прокручивать выбранную линию, чтобы быть в верхней части дел.

HTML:

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

window.addEventListener('load', mInit, false);

function mInit()
{
    var tbl = makeTable(20, 5);
    byId('scrollMe').appendChild(tbl);

    byId('doScrollBtn').addEventListener('click', onScrollBtnClick, false);
}

function onScrollBtnClick()
{
    var tbl = byId('demoTable');
    var rowNum = byId('scrollRowInput').value;
    var selectedRow = tbl.rows[rowNum];
    selectedRow.scrollIntoView();
}

function makeTable(numRows, numCols)
{
    var x, y, tbl, row, cell;
    tbl = newEl('table');
    tbl.id = 'demoTable';
    for (y=0; y<numRows; y++)
    {
        row = newEl('tr');
        for (x=0; x<numCols; x++)
        {
            cell = newEl('td');
            cell.appendChild( newTxt("Cell: " + x + ", " + y) );
            row.appendChild(cell);
        }
        tbl.appendChild(row);
    }
    return tbl;
}

</script>
<style>
#scrollMe
{
    height: 150px;
    border: solid 1px red;
    overflow-y: scroll;
}
</style>
</head>
<body>
    <div id='scrollMe'></div>
    <input id='scrollRowInput'/><button id='doScrollBtn'><-- Scroll to this row</button>
</body>
</html>

enhzflep 22 окт. 2013, в 00:24

Ещё вопросы

José SAYAGO · Accepted Answer · 2013-10-22T01-07-00.000Z

возможно, jQuery scrollTop может помочь вам в этом. Проверьте код ниже, в конце вы найдете ссылку на рабочий пример:

JavaScript

$(document).ready(function(){
    // Count rows
    var length = $('tr', $('.price')).not('tr:first').length;
    // Build links to rows from row 1 (to ignore table header)
    for( i=1; i <= length; i++ ) {
        $('.pages').append('<a class="linkrow" href="'+i+'">Row '+i+'</a> | ');
    }
    // On click
    $('a.linkrow').on('click',function(e){
        // Prevent default
        e.preventDefault();
        // Get row index from link href
        var rowId = $(this).attr('href');
        // Get row position by index
        var ypos = $('.price tr:eq('+rowId+')').offset().top;
        // Go to row
        $('.posts').animate({
            scrollTop: $('.posts').scrollTop()+ypos
        }, 500);
        // Some CSS to visualize which row is being viewed
        $('.price tr').css({'background-color': 'none'});
        $('.price tr:eq('+rowId+')').css({ 'background-color': '#ccc' } );
    });
});

Пример jsFiddle: http://jsfiddle.net/laelitenetwork/XEfHr/