Я пытаюсь переместить страницу в <div>
элемент.
Я пробовал следующий код безрезультатно:
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
Я пытаюсь переместить страницу в <div>
элемент.
Я пробовал следующий код безрезультатно:
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
Ответы:
Вы можете использовать якорь, чтобы "сфокусировать" div. То есть:
<div id="myDiv"></div>
а затем используйте следующий JavaScript:
// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";
location.href="#";location.href="#myDiv"
. Использование id="myDiv"
предпочтительнее name="myDiv"
и работает тоже.
scrollIntoView работает хорошо:
document.getElementById("divFirst").scrollIntoView();
Полная ссылка в документах MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
scrollIntoView
Ваш вопрос и ответы выглядят иначе. Я не знаю, ошибаюсь ли я, но для тех, кто гуглит и достигает здесь, мой ответ будет следующим:
Мой ответ объяснил:
вот простой JavaScript для этого
вызывайте это, когда вам нужно прокрутить экран до элемента, который имеет id = "yourSpecificElementId"
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));
то есть. для вышеупомянутого вопроса, если намерение состоит в том, чтобы прокрутить экран до div с id 'divFirst'
код будет: window.scroll(0,findPos(document.getElementById("divFirst")));
и вам нужна эта функция для работы:
//Finds y value of given object
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curtop];
}
}
экран будет прокручен до вашего конкретного элемента.
window
вы хотите прокрутить, а не переполненную область просмотра
[curtop]
в curtop
конце
(window.screen.height/2)
вычтите из findPos
Я немного разбирался в этом, и я понял, какой-то самый естественный способ сделать это. Конечно, теперь это мой личный любимый свиток. :)
const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
top: y,
behavior: 'smooth'
});
Обратите внимание, что window.scroll({ ...options })
не поддерживается в IE, Edge и Safari. В этом случае, скорее всего, лучше всего использовать
element.scrollIntoView()
. (Поддерживается в IE 6). Скорее всего, вы можете (читай: не проверено) передавать опции без каких-либо побочных эффектов.
Они, конечно, могут быть заключены в функцию, которая ведет себя в соответствии с тем, какой браузер используется.
window.scroll
Попробуй это:
var divFirst = document.getElementById("divFirst");
divFirst.style.visibility = 'visible';
divFirst.style.display = 'block';
divFirst.tabIndex = "-1";
divFirst.focus();
например, @:
element.tabIndex
но нет element.tabindex
; второй работает на Firefox, но не на Chrome (по крайней мере, когда я попробовал это некоторое время назад). Конечно, используется как атрибут HTML tabIndex
и для tabindex
работы (и для XHTML, tabindex
должен использоваться)
Чтобы прокрутить до заданного элемента, просто сделайте это решение только для JavaScript ниже.
Простое использование:
EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);
Объект движка (вы можете поиграть с фильтром, значениями в секунду):
/**
*
* Created by Borbás Geri on 12/17/13
* Copyright (c) 2013 eppz! development, LLC.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*/
var EPPZScrollTo =
{
/**
* Helpers.
*/
documentVerticalScrollPosition: function()
{
if (self.pageYOffset) return self.pageYOffset; // Firefox, Chrome, Opera, Safari.
if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6 (standards mode).
if (document.body.scrollTop) return document.body.scrollTop; // Internet Explorer 6, 7 and 8.
return 0; // None of the above.
},
viewportHeight: function()
{ return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },
documentHeight: function()
{ return (document.height !== undefined) ? document.height : document.body.offsetHeight; },
documentMaximumScrollPosition: function()
{ return this.documentHeight() - this.viewportHeight(); },
elementVerticalClientPositionById: function(id)
{
var element = document.getElementById(id);
var rectangle = element.getBoundingClientRect();
return rectangle.top;
},
/**
* Animation tick.
*/
scrollVerticalTickToPosition: function(currentPosition, targetPosition)
{
var filter = 0.2;
var fps = 60;
var difference = parseFloat(targetPosition) - parseFloat(currentPosition);
// Snap, then stop if arrived.
var arrived = (Math.abs(difference) <= 0.5);
if (arrived)
{
// Apply target.
scrollTo(0.0, targetPosition);
return;
}
// Filtered position.
currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);
// Apply target.
scrollTo(0.0, Math.round(currentPosition));
// Schedule next tick.
setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (1000 / fps));
},
/**
* For public use.
*
* @param id The id of the element to scroll to.
* @param padding Top padding to apply above element.
*/
scrollVerticalToElementById: function(id, padding)
{
var element = document.getElementById(id);
if (element == null)
{
console.warn('Cannot find element with id \''+id+'\'.');
return;
}
var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
var currentPosition = this.documentVerticalScrollPosition();
// Clamp.
var maximumScrollPosition = this.documentMaximumScrollPosition();
if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;
// Start animation.
this.scrollVerticalTickToPosition(currentPosition, targetPosition);
}
};
Вот функция, которая может включать необязательное смещение для этих фиксированных заголовков. Внешние библиотеки не нужны.
function scrollIntoView(selector, offset = 0) {
window.scroll(0, document.querySelector(selector).offsetTop - offset);
}
Вы можете получить высоту элемента, используя JQuery, и перейти к нему.
var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)
Обновление март 2018
Прокрутите до этого ответа, не используя JQuery
scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)
Вы можете установить фокус на элемент. Работает лучше чемscrollIntoView
node.setAttribute('tabindex', '-1')
node.focus()
node.removeAttribute('tabindex')
Лучший, самый короткий ответ, который работает даже с анимационными эффектами:
var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});
Если у вас есть фиксированная навигационная панель, просто вычтите ее высоту из верхнего значения, поэтому, если ваша фиксированная высота панели составляет 70 пикселей, строка 2 будет выглядеть так:
window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});
Пояснение:
Строка 1 получает позицию элемента. Строка 2 прокручивает до позиции элемента; behavior
свойство добавляет плавный анимированный эффект
Фокус может быть установлен только на интерактивные элементы ... Div только представляют логический раздел страницы.
Возможно, вы можете установить границы вокруг div или изменить его цвет, чтобы имитировать фокус. И да, Видимость не в фокусе.
Я думаю, что если вы добавите tabindex в ваш div, он сможет получить фокус:
<div class="divFirst" tabindex="-1">
</div>
Я не думаю, что это действительно так, хотя tabindex можно применять только к области, кнопке, вводу, объекту, выделению и текстовой области. Но попробуйте.
tabindex
есть «основной атрибут», который представляет собой «глобальные атрибуты» (атрибуты, общие для всех элементов языка HTML). См. W3.org/TR/2011/WD-html-markup-20110113/global-attributes.html
Похоже на решение @ caveman
const element = document.getElementById('theelementsid');
if (element) {
window.scroll({
top: element.scrollTop,
behavior: 'smooth',
})
}
Вы не можете сосредоточиться на div. Вы можете сосредоточиться только на элементе ввода в этом div. Также вам нужно использовать element.focus () вместо display ()
<div>
фокусировку, если используете tabindex
атрибут. См. Dev.w3.org/html5/spec-author-view/editing.html#attr-tabindex
Посмотрев вокруг, вот что наконец-то сработало для меня:
Найти / найти div в вашем доме, который имеет полосу прокрутки. Для меня это выглядело так: "div class =" table_body table_body_div "scroll_top =" 0 "scroll_left =" 0 "style =" width: 1263px; высота: 499 пикселей; "
Я нашел его с помощью этого xpath: // div [@ class = 'table_body table_body_div']
Использовал JavaScript для выполнения прокрутки следующим образом: (JavascriptExecutor) driver) .executeScript ("arguments [0] .scrollLeft = arguments [1];", element, 2000);
2000 - это количество пикселей, которое я хотел прокрутить вправо. Используйте scrollTop вместо scrollLeft, если вы хотите прокрутить ваш div вниз.
Примечание. Я попытался использовать scrollIntoView, но он не работал должным образом, поскольку на моей веб-странице было несколько элементов div. Это будет работать, если у вас есть только одно главное окно, где находится фокус. Это лучшее решение, с которым я столкнулся, если вы не хотите использовать jQuery, чего я не хотел.
Метод, который я часто использую для прокрутки контейнера до его содержимого.
/**
@param {HTMLElement} container : element scrolled.
@param {HTMLElement} target : element where to scroll.
@param {number} [offset] : scroll back by offset
*/
var scrollAt=function(container,target,offset){
if(container.contains(target)){
var ofs=[0,0];
var tmp=target;
while (tmp!==container) {
ofs[0]+=tmp.offsetWidth;
ofs[1]+=tmp.offsetHeight;
tmp=tmp.parentNode;
}
container.scrollTop = Math.max(0,ofs[1]-(typeof(offset)==='number'?offset:0));
}else{
throw('scrollAt Error: target not found in container');
}
};
если вы хотите переопределить глобально, вы также можете сделать:
HTMLElement.prototype.scrollAt=function(target,offset){
if(this.contains(target)){
var ofs=[0,0];
var tmp=target;
while (tmp!==this) {
ofs[0]+=tmp.offsetWidth;
ofs[1]+=tmp.offsetHeight;
tmp=tmp.parentNode;
}
container.scrollTop = Math.max(0,ofs[1]-(typeof(offset)==='number'?offset:0));
}else{
throw('scrollAt Error: target not found in container');
}
};
Из-за поведения «гладкий» не работает в Safari, Safari ios, Explorer. Я обычно пишу простую функцию, используя requestAnimationFrame
(function(){
var start;
var startPos = 0;
//Navigation scroll page to element
function scrollTo(timestamp, targetTop){
if(!start) start = timestamp
var runtime = timestamp - start
var progress = Math.min(runtime / 700, 1)
window.scroll(0, startPos + (targetTop * progress) )
if(progress >= 1){
return;
}else {
requestAnimationFrame(function(timestamp){
scrollTo(timestamp, targetTop)
})
}
};
navElement.addEventListener('click', function(e){
var target = e.target //or this
var targetTop = _(target).getBoundingClientRect().top
startPos = window.scrollY
requestAnimationFrame(function(timestamp){
scrollTo(timestamp, targetTop)
})
}
})();
попробуй эту функцию
function navigate(divId) {
$j('html, body').animate({ scrollTop: $j("#"+divId).offset().top }, 1500);
}
Передайте div id в качестве параметра, он будет работать, я уже его использую
$j
?
visibility
иdisplay
используются для того, чтобы сделать элементы (не) видимыми. Хотите прокрутить div на экране?