Короткий ответ:
. Решением этого будет поиск «внешнего 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-прокси, которые также обычно поддерживаются в качестве параметра конфигурации одного домашнего маршрутизатора. Для получения инструкций по настройке вы должны обратиться к руководству своего маршрутизатора.
Вот что я использую на своем сайте:
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
Версия jQuery:
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
Работает из jQuery 1.6
Javascript:
document.getElementById('messages').scrollIntoView(false);
Прокрутка до последней строки содержимого.
Я столкнулся с той же проблемой, но с дополнительным ограничением: у меня не было контроля над кодом, который добавлял новые элементы в контейнер прокрутки. Ни один из примеров, которые я нашел здесь, не позволил мне сделать именно это. Вот решение, в котором я закончил.
Он использует 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/
<div class="abc"><div data-bind=attr : {'id': myId } ></div></div>
В этом коде myId является переменной. Как я могу получить доступ к этому идентификатору в скрипте.
– Irfan Yusanif
9 October 2015 в 07:20
Если вы не хотите полагаться на scrollHeight
, следующий код помогает:
$('#scroll').scrollTop(1000000);
1E10
). Меньшее число работ
– andrewtweber
22 November 2015 в 20:25
Я знаю, что это старый вопрос, но ни одно из этих решений не разработано для меня. Я закончил использовать offset (). Top, чтобы получить желаемые результаты. Вот что я использовал для мягкой прокрутки экрана до последнего сообщения в приложении для чата:
$("#html, body").stop().animate({
scrollTop: $("#last-message").offset().top
}, 2000);
Надеюсь, это поможет кому-то другому.
небольшое добавление: прокручивается только, если последняя строка уже видна. если прокручивать крошечный бит, оставляет содержимое там, где оно (внимание: не тестировалось с разными размерами шрифта, это может потребоваться некоторые корректировки внутри «> = сравнение»):
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;
Очень простой способ - установить scroll to
на высоту div.
var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
Нашли это очень полезно, спасибо.
Для людей с угловым 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 немного запутанной с угловой.
Также для приложения чата я нашел выполнение этого задания после того, как ваши чаты были загружены, чтобы быть полезными, вам также может понадобиться пощелкать и короткий тайм-аут.
Вы также можете с помощью jQuery присоединить анимацию к html,body
документа с помощью:
$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);
, что приведет к плавному прокрутке вверху div с id "div-id".
Javascript или jquery:
var scroll = document.getElementById('messages');
scroll.scrollTop = scroll.scrollHeight;
scroll.animate({scrollTop: scroll.scrollHeight});
Css:
.messages
{
height: 100%;
overflow: auto;
}
Это намного проще, если вы используете jQuery:
$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
$("#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);
Также как бонусный фрагмент. Я использую угловой и пытался прокрутить поток сообщений до низа, когда пользователь выбрал разные разговоры с пользователями. Чтобы убедиться, что прокрутка работает после того, как новые данные были загружены в div с сообщением ng-repeat для сообщений, просто заверните фрагмент прокрутки в тайм-аут.
$timeout(function(){
var messageThread = document.getElementById('message-thread-div-id');
messageThread.scrollTop = messageThread.scrollHeight;
},0)
Это позволит убедиться, что что событие прокрутки запускается после того, как данные были вставлены в DOM.
Это позволит вам прокрутить весь путь вниз относительно высоты документа
$('html, body').animate({scrollTop:$(document).height()}, 1000);
Новый метод:
this.scrollIntoView(false);
Вы можете использовать следующий код:
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
с использованием анимации jQuery :
$('#DebugContainer').stop().animate({
scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);