Почему у меня проблемы со свитком чата? [Дубликат]

Короткий ответ:

. Решением этого будет поиск «внешнего IP» вашего маршрутизатора и включение пересылки портов для портов 80 и 443 на ваш локальный IP.

Длинный ответ:

Интернет разделен на «публичные» и «частные» IP-пространства. Частные IP-адреса обычно не доступны напрямую из «общедоступного» IP-адреса. IP-адреса из 192.168.0.1-255 относятся к одной из этих частных подсетей.

Ваш маршрутизатор (дома) обычно имеет несколько IP-адресов. Один или несколько из вашей локальной частной сети (192.168.0.X) и один из вашего локального интернет-провайдера (я думаю, что-то вроде 193.xxx.xxx.xxx, потому что ваш DNS находится в этой сети), который находится из «общедоступного» пространства.

Чтобы подключиться к вашему компьютеру с помощью частного IP-адреса из общедоступного IP-адреса, такого как 254.231.52.xxx, вам нужно будет подключиться к общедоступному IP-адресу вашего маршрутизатора (193 ... один). Вам также необходимо включить механизм, называемый «переадресация портов». Этот effectivley передает весь интернет-трафик, поступающий на общедоступный IP-адрес вашего маршрутизатора на переадресованных портах, и передает его на частный IP-адрес, на который настроен переадресация. Например. 254.231.52 .. -> 193 ...: 80 -> 192.168 ...: 80 Обычно домашние маршрутизаторы имеют страницу конфигурации, где вы можете это сделать. Необходимые порты, которые вы, вероятно, используете, - 80 (http) и 443 (https).

Другой возможностью является использование так называемых http-прокси, которые также обычно поддерживаются в качестве параметра конфигурации одного домашнего маршрутизатора. Для получения инструкций по настройке вы должны обратиться к руководству своего маршрутизатора.

638
задан sudo bangbang 3 August 2016 в 12:36
поделиться

19 ответов

Вот что я использую на своем сайте:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
1021
ответ дан Black 16 August 2018 в 01:53
поделиться
  • 1
    этот метод работает со всеми браузерами? – jondinham 2 March 2012 в 12:35
  • 2
    @PaulDinh: Я просто посмотрел на это, и есть проблема с IE7 и ниже, используя scrollHeight. Для IE7 здесь, похоже, существует работа . – Sean 18 August 2012 в 17:44
  • 3
    Почему это не работает после динамического добавления элементов внутри div? – Vince 29 June 2013 в 13:18
  • 4
    @Vince - Это разовая сделка. Если вы измените контент, вам нужно будет выполнить повторный запуск. Команда в основном говорит «переместить полосу прокрутки в эту позицию». – DrFriedParts 10 August 2013 в 00:02
  • 5
    Кроме того, если у вас есть элементы, помещенные внутри div, вы можете прокрутить определенный элемент в представлении. (т. е. элемент виден внутри родительского div), например: $ (& quot; # & quot; + instanceID) .scrollTop ($ (& quot; # & quot; + instanceID) [0] .scrollIntoView); – netfed 2 March 2014 в 08:46

Версия jQuery:

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

Работает из jQuery 1.6

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

30
ответ дан Akira Yamamoto 16 August 2018 в 01:53
поделиться
  • 1
    «Чистый jQuery», хе. Как вы определяете, что такое «чистый jQuery»? и что такое только JavaScript? – Zach Saucier 28 June 2016 в 16:02
  • 2
    – Will Hoskings 12 September 2018 в 17:38

Javascript:

document.getElementById('messages').scrollIntoView(false);

Прокрутка до последней строки содержимого.

1
ответ дан Barath 16 August 2018 в 01:53
поделиться

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

Он использует Mutation Observers ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ), что делает его пригодным для использования только в современных браузерах (хотя существуют полисы)

Таким образом, в основном код делает именно это:

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

Я сделал скрипку, чтобы продемонстрировать концепцию: https://jsfiddle.net/j17r4bnk/

2
ответ дан Benkinass 16 August 2018 в 01:53
поделиться
  • 1
    как получить динамический идентификатор? как в <div class="abc"><div data-bind=attr : {'id': myId } ></div></div> В этом коде myId является переменной. Как я могу получить доступ к этому идентификатору в скрипте. – Irfan Yusanif 9 October 2015 в 07:20
  • 2
    Я не совсем уверен, что понимаю ваш вопрос. В моем примере «myId» является идентификатором контейнера прокрутки. Вы хотите создать несколько областей, где может прокручиваться пользователь? – Benkinass 12 October 2015 в 07:33

Если вы не хотите полагаться на scrollHeight, следующий код помогает:

$('#scroll').scrollTop(1000000);
11
ответ дан Benny Neugebauer 16 August 2018 в 01:53
поделиться
  • 1
    Ни одно из вышеперечисленных решений, в том числе ваше, похоже, работает на Firefox на Android ... любые мысли, пожалуйста? – Kaya Toast 13 December 2014 в 11:32
  • 2
    Не работает на IE 11 – andrewtweber 22 November 2015 в 20:22
  • 3
    Неважно, я использовал слишком большое число (1E10). Меньшее число работ – andrewtweber 22 November 2015 в 20:25
  • 4
    BTW, scrollTop (1000000) - плохая производительность, если это имеет значение. – OhadR 9 January 2016 в 20:52
  • 5
    Почему это было бы плохой работой? Это не похоже на повторение каждого пикселя. Теперь неправильная практика - это еще один вопрос ... – devios1 30 March 2017 в 17:59

Я знаю, что это старый вопрос, но ни одно из этих решений не разработано для меня. Я закончил использовать offset (). Top, чтобы получить желаемые результаты. Вот что я использовал для мягкой прокрутки экрана до последнего сообщения в приложении для чата:

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

Надеюсь, это поможет кому-то другому.

0
ответ дан BrianLegg 16 August 2018 в 01:53
поделиться

небольшое добавление: прокручивается только, если последняя строка уже видна. если прокручивать крошечный бит, оставляет содержимое там, где оно (внимание: не тестировалось с разными размерами шрифта, это может потребоваться некоторые корректировки внутри «> = сравнение»):

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;
5
ответ дан Bruno Jennrich 16 August 2018 в 01:53
поделиться

Очень простой способ - установить scroll to на высоту div.

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
1
ответ дан Cubetastic 16 August 2018 в 01:53
поделиться

Нашли это очень полезно, спасибо.

Для людей с угловым 1.X:

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

Просто потому, что обтекание элементов jQuery и HTML DOM немного запутанной с угловой.

Также для приложения чата я нашел выполнение этого задания после того, как ваши чаты были загружены, чтобы быть полезными, вам также может понадобиться пощелкать и короткий тайм-аут.

6
ответ дан devonjs 16 August 2018 в 01:53
поделиться

Вы также можете с помощью jQuery присоединить анимацию к html,body документа с помощью:

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

, что приведет к плавному прокрутке вверху div с id "div-id".

3
ответ дан John Dunne 16 August 2018 в 01:53
поделиться

Javascript или jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

Css:

 .messages
 {
      height: 100%;
      overflow: auto;
  }
4
ответ дан Lay Leangsros 16 August 2018 в 01:53
поделиться

Это намного проще, если вы используете jQuery:

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
321
ответ дан Michael Mrozek 16 August 2018 в 01:53
поделиться
  • 1
    – captainspi 3 April 2012 в 11:49
  • 2
    1 Линия вместо 2? нет подсказки, но то, что вы можете легко сделать с помощью JQuery, - это оживить действие следующим образом: $ (& quot; # div-id & quot;). animate ({scrollTop: $ (& quot; # div-id & quot;)) [0] .scrollHeight} , 1000); надеюсь, это поможет любому :) – Samuel 4 April 2012 в 14:07
  • 3
    вам нужно [0], чтобы получить элемент dom из элемента jquery, чтобы получить scrollHeight – Jimmy Bosse 15 July 2012 в 23:18
  • 4
    «Не говоря уже о том, что JQ труднее читать / понимать!» Чисто мнение. Я, например, нахожу JQuery гораздо легче читать, понимать и делать что-то. И это решение лучше, если вы уже используете JQuery. – Johannes 20 June 2013 в 17:31
  • 5
    Не повторяя себя: $("#mydiv").scrollTop(function() { return this.scrollHeight; }); – Eric 23 March 2014 в 21:44

Используя jQuery, scrollTop используется для установки вертикального положения scollbar для любого заданного элемента. есть также jquery scrollTo plugin , используемый для прокрутки с анимацией и различными опциями ( demos )

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

, если вы хотите использовать метод анимации jQuery для добавления анимации при прокрутке вниз, проверьте следующий фрагмент:

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);
6
ответ дан msoliman 16 August 2018 в 01:53
поделиться

Также как бонусный фрагмент. Я использую угловой и пытался прокрутить поток сообщений до низа, когда пользователь выбрал разные разговоры с пользователями. Чтобы убедиться, что прокрутка работает после того, как новые данные были загружены в div с сообщением ng-repeat для сообщений, просто заверните фрагмент прокрутки в тайм-аут.

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

Это позволит убедиться, что что событие прокрутки запускается после того, как данные были вставлены в DOM.

4
ответ дан mylescc 16 August 2018 в 01:53
поделиться
  • 1
    Я подозреваю, что $ scope. $ Apply (callback) будет работать так же, как и это приведет к перевариванию и переоценке представления. – SStanley 17 August 2016 в 05:46
  • 2
    Спасибо! Я действительно задавался вопросом, почему я не мог заставить его работать, и проблема с таймаутом была проблемой. – Wayferer 3 July 2018 в 04:49

Это позволит вам прокрутить весь путь вниз относительно высоты документа

$('html, body').animate({scrollTop:$(document).height()}, 1000);
3
ответ дан Navaneeth 16 August 2018 в 01:53
поделиться

Новый метод:

this.scrollIntoView(false);
18
ответ дан sudo bangbang 16 August 2018 в 01:53
поделиться

Вы можете использовать следующий код:

function scrollToBottom(id){
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

Чтобы выполнить плавный прокрутку, используйте следующий код (require jQuery):

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

См. образец в JSFiddle

И вот как это работает:

Ссылка: scrollTop , scrollHeight , clientHeight

66
ответ дан ThoQ 16 August 2018 в 01:53
поделиться
  • 1
    Привет @dMix, я думаю, что это решение должно быть принятым ответом, потому что он прокручивается точно донизу. Другие выше работают, потому что вы устанавливаете более высокую ценность, чем следует. – Erik Engi 18 February 2018 в 14:05
  • 2
    – Canet Robern 8 March 2018 в 02:30

с использованием анимации jQuery :

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);
84
ответ дан webeno 16 August 2018 в 01:53
поделиться
  • 1
    Вот что сказал Сэм в этом комментарии . Это, вероятно, более полезно в реальном ответе, хотя! – Quentin Pradet 12 September 2012 в 16:04
  • 2
    Обратите внимание, как этот ответ использует .stop () , который предотвращает проблемы с несколькими анимациями. – kalyfe 20 August 2013 в 09:29
  • 3
    Удивительно, но это единственный, который работает для меня из всех ответов ранее. Это может быть из-за того, как мои другие divs настроены вокруг слоя, который должен содержать прокрутку – Duniyadnd 12 January 2015 в 14:54
-1
ответ дан A.J.Bauer 29 October 2018 в 07:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: