Как убрать скрол при обновлении div

@Tvis · Регистрация: 30.09.2015

Студворк — интернет-сервис помощи студентам

И так есть проблемма допустим есть у меня div в нем таблица
Предположим в ней 10 строк (Динамически меняется)
дальше идет 2 таблица в ней предположим 20строк (Динамически меняется)

с помощью js я обновляю содержимое первой таблицы, тоесть сначала удаляю полностью старое содержимое, потом вставляю новое.
Получается так что таблица пропадает буквально на 1мс ну глазом конечно не видно но все же браузер это видит)
и если я смотрел на 2 таблицу в самом низу меня просто скролит разом в начало страницы где находится первая таблица
возможно ли как то организовать чтобы такого не происходило?
очень бы хотелось услышать способы реализации и предложения.

Для особо любопытных идет запрос бд и получаю список. он меняется и мне приходится запрашивать его раз в сек допустим.

@brain-4-me · 10.01.2017, 06:51

а покажи код загрузки первой таблицы? он у тебя через ajax? если так то не совсем понятно почему скролит

@j2FunOnly · 10.01.2017, 09:26

Сообщение от Tvis

тоесть сначала удаляю полностью старое содержимое, потом вставляю новое.

Так а зачем вы удаляете, заменяйте сразу.

@Balanaar · 10.01.2017, 09:37

Надо смотреть на способ реализации обновления таблицы. По идее скроллить не должно. Набросал по-быстрому демонстрацию:
http://codepen.io/anon/pen/YNyozo

HTML5
1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<p>Таблица 1</p>
<table class="first"></table>
<p>Таблица 2</p>
<table class="second"></table>
<br>
<button onclick="refresh();">Обновить</button>

CSS
1
2
3
4
5
6
table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}

JavaScript
1
2
3
4
5
6
for (var i = 1; i < 11; i++) $('.first').append('<tr><td>'+i+'</td></tr>');
for (var i = 1; i < 21; i++) $('.second').append('<tr><td>'+i+'</td></tr>');
function refresh() {
  $('.first').empty();
  for (var i = 10; i < 21; i++) $('.first').append('<tr><td>'+i+'</td></tr>');
}

@Tvis · 10.01.2017, 13:43 **[ТС]**

Вот кусок кода почему меня скролит незнаю вроде все норм)

HTML5
1
2
3
4
<table id="result_list_history" class="duel-table-games center-text" style="width:100%">
               <tbody>
               </tbody>
    </table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
function updateClosedGames() {
    $.ajax({
      url: "/refreshminihistory",
      type: "GET",
      dataType: "json",
      success: function(result) {
        if(result.success) {
          var games = result.games;
          closedGames = games;
          var table = document.getElementById("result_list_history");
          table.innerHTML = "";  
          for(var i = 0; i < closedGames.length; i++) {
            addGameTableHistory(i, closedGames[i], result.user_1);
          }
        }
      }
    });
  }
 
 function addGameTableHistory(pos, game, user_1) {
    var o1 = false;
    if (user_1 != null && (game.user_1 == user_1 || game.user_2 == steamid)) {
      var table = document.getElementById("result_list_history");
      o1 = true;
    } else var table = document.getElementById("result_list_history");
    
    var row = table.insertRow();
 
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5);
    var cell7 = row.insertCell(6);
 
    
 
if (game.status == 1) cell3.innerHTML = 'Контент';
    else cell3.innerHTML = 'Контент';
    if (game.stavka > 0) cell4.innerHTML = 'ПОБЕДИЛ: <i class="fa fa-hand-o-right"></i>'; else cell4.innerHTML = '';
 
//NEW   
if(game.winner == game.user_1){
cell5.innerHTML = '<span class="winusername">' + game.user_1 + '</span></div></div>';
    if(game.side_1_user == "t"){
        cell1.innerHTML = 'Контент" >';
        cell7.innerHTML = 'Контент" >';      
    }else{
        cell1.innerHTML = 'Контент';
        cell7.innerHTML = 'Контент';
    }
}
 
if(game.winner == game.user_2){
cell5.innerHTML = '<span class="winusername">' + game.user_2 + '</span></div></div>';
    if(game.side_2_user == "t"){
    cell7.innerHTML = 'Контент';
    cell1.innerHTML = 'Контент'; 
    }else{
    cell7.innerHTML = 'Контент';
    cell1.innerHTML = 'Контент';
    }
}   
//NEW END
    
    var total_bet = parseFloat(game.stavka * 2);
  
    cell6.innerHTML =  '<h4><span class="label label-primary">' + total_bet.toFixed(2) + '</span></h4>';
  }

@Balanaar · 10.01.2017, 15:08

Я бы вам посоветовал, как предложил j2FunOnly тоже, поменять логику работы программы и обновлять таблицу без её полного затирания. То есть работать напрямую с содержимыми ячеек. Так и проблема уйдёт, и более грамотно что-ли будет

@j2FunOnly · 10.01.2017, 16:00

Сообщение от Tvis

вроде все норм

Тут таблица отрисовывается по-ячеейчно (wat?), а надо бы сначала сформировать тело таблицы и только потом поменять в документе.

Добавлено через 52 секунды

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
function updateClosedGames() {
  $.ajax({
    url: "/refreshminihistory",
    type: "GET",
    dataType: "json",
    success: function(result) {
      if(result.success) {
        // var games = result.games;
        var closedGames = result.games;
        // var table = document.getElementById("result_list_history");
        // table.innerHTML = "";
        var $table = $('#result_list_history');
        var $tbody = $('<tbody>');
        for(var i = 0; i < closedGames.length; i++) {
          $tbody.append(addGameTableHistory(i, closedGames[i], result.user_1));
        }
        $table.html($tbody);
      }
    }
  });
}
 
function addGameTableHistory(pos, game, user_1) {
  // (╯°□°）╯︵ ┻━┻ 1
  var o1 = false;
  if(user_1 != null && (game.user_1 == user_1 || game.user_2 == steamid)) { // steamid - откуда?
    // var table = document.getElementById("result_list_history");
    o1 = true;
  } // else {
    // var table = document.getElementById("result_list_history");
  // }
 
  var row = $('<tr>'); // table.insertRow();
 
  // (╯°□°）╯︵ ┻━┻ 2
  var cell1 = $('<td>').appendTo(row); // row.insertCell(0);
  var cell2 = $('<td>').appendTo(row); //row.insertCell(1);
  var cell3 = $('<td>').appendTo(row); //row.insertCell(2);
  var cell4 = $('<td>').appendTo(row); //row.insertCell(3);
  var cell5 = $('<td>').appendTo(row); //row.insertCell(4);
  var cell6 = $('<td>').appendTo(row); //row.insertCell(5);
  var cell7 = $('<td>').appendTo(row); //row.insertCell(6);
 
  if(game.status == 1) {
    cell3.html('Контент');
  } else {
    cell3.html('Контент');
  }
 
  if(game.stavka > 0) {
    cell4.hmtl('ПОБЕДИЛ: <i class="fa fa-hand-o-right"></i>');
  } else {
    cell4.empty();
  }
 
// NEW (╯°□°）╯︵ ┻━┻ 3
 
  if(game.winner == game.user_1) {
    cell5.html('<span class="winusername">' + game.user_1 + '</span></div></div>');
    if(game.side_1_user == "t") {
      cell1.html('Контент" >');
      cell7.html('Контент" >');
    } else {
      cell1.html('Контент');
      cell7.html('Контент');
    }
  }
 
  if(game.winner == game.user_2) {
    cell5.html('<span class="winusername">' + game.user_2 + '</span></div></div>';
    if(game.side_2_user == "t") {
      cell7.html('Контент');
      cell1.html('Контент');
    } else {
      cell7.html('Контент');
      cell1.html('Контент');
    }
  }
 
// NEW END
 
  var total_bet = parseFloat(game.stavka * 2);
  cell6.html('<h4><span class="label label-primary">' + total_bet.toFixed(2) + '</span></h4>');
 
  return row;
}

ЗЫ сам писал или копипаста?

@Tvis · 10.01.2017, 20:34 **[ТС]**

Сообщение от j2FunOnly

ЗЫ сам писал или копипаста?

копипаста но переписывать настолько в лом) проблему кстати решил) функция вызывалась не нужная мне из другого js))

Новые блоги и статьи Все статьи Все блоги /
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .

@Tvis 6 / 6 / 1 Регистрация: 30.09.2015 Сообщений: 140

	Как убрать скрол при обновлении div 10.01.2017, 02:32. Показов 842. Ответов 7 Метки нет (Все метки) И так есть проблемма допустим есть у меня div в нем таблица Предположим в ней 10 строк (Динамически меняется) дальше идет 2 таблица в ней предположим 20строк (Динамически меняется) с помощью js я обновляю содержимое первой таблицы, тоесть сначала удаляю полностью старое содержимое, потом вставляю новое. Получается так что таблица пропадает буквально на 1мс ну глазом конечно не видно но все же браузер это видит) и если я смотрел на 2 таблицу в самом низу меня просто скролит разом в начало страницы где находится первая таблица возможно ли как то организовать чтобы такого не происходило? очень бы хотелось услышать способы реализации и предложения. Для особо любопытных идет запрос бд и получаю список. он меняется и мне приходится запрашивать его раз в сек допустим. 0

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	10.01.2017, 06:51
	а покажи код загрузки первой таблицы? он у тебя через ajax? если так то не совсем понятно почему скролит 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	10.01.2017, 15:08
	Я бы вам посоветовал, как предложил j2FunOnly тоже, поменять логику работы программы и обновлять таблицу без её полного затирания. То есть работать напрямую с содержимыми ячеек. Так и проблема уйдёт, и более грамотно что-ли будет 0