Ik heb een HTML-document met afbeeldingen in een rasterformaat met behulp van <ul><li><img.... Het browservenster heeft zowel verticale & horizontaal scrollen.
Vraag:
Als ik op een afbeelding <img>klik, hoe kan ik dan het hele document laten scrollen naar een positie waar de afbeelding waarop ik zojuist heb geklikt top:20px; left:20px?
Ik heb hier gezocht naar soortgelijke berichten… hoewel ik vrij nieuw ben in JavaScript en wil begrijpen hoe dit voor mezelf wordt bereikt.
Antwoord 1, autoriteit 100%
Omdat je wilt weten hoe het werkt, zal ik het stap voor stap uitleggen.
Eerst wil je een functie binden als de klikhandler van de afbeelding:
$('#someImage').click(function () {
// Code to do scrolling happens here
});
Dat zal de klikhandler toepassen op een afbeelding met id="someImage". Als je dit voor alleafbeeldingen wilt doen, vervang dan '#someImage'door 'img'.
Nu de daadwerkelijke scrollcode:
-
Verkrijg de afbeeldingsverschuivingen (ten opzichte van het document):
var offset = $(this).offset(); // Contains .top and .left -
Trek 20 af van
topenleft:offset.left -= 20; offset.top -= 20; -
Beweeg nu de CSS-eigenschappen van boven en naar links scrollen van
<body>en<html>:$('html, body').animate({ scrollTop: offset.top, scrollLeft: offset.left });
Antwoord 2, Autoriteit 196%
Er is een DOM-methode genaamd scrollIntoView, Dat wordt ondersteund door alle grote browsers, die een element uitlijnen met de bovenkant / links van de viewport (of zo dicht mogelijk).
$("#myImage")[0].scrollIntoView();
Op ondersteunde browsers kunt u opties verstrekken:
$("#myImage")[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
Als alternatief, als alle elementen unieke ID’s hebben, kunt u gewoon de hasheigendommen van de locationobject voor ondersteuning voor back / forward:
$(document).delegate("img", function (e) {
if (e.target.id)
window.location.hash = e.target.id;
});
Pas daarna de scrollTop/ scrollLeftEigenschappen door -20:
document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;
Antwoord 3, Autoriteit 8%
eenvoudigste oplossing die ik
heb gezien
var offset = $("#target-element").offset();
$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
}, 1000);
Antwoord 4, autoriteit 4%
Er zijn methoden om een element rechtstreeks in de weergave te schuiven, maar als u vanuit een element naar een relatief punt wilt scrollen, moet u dit handmatig doen:
Krijg in de klikhandler de positie van het element ten opzichte van het document, trek 20af en gebruik window.scrollTo:
var pos = $(this).offset();
var top = pos.top - 20;
var left = pos.left - 20;
window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));
Antwoord 5, autoriteit 3%
Bekijk de plug-in jQuery.scrollTo. Hier is een demo.
Deze plug-in heeft veel opties die verder gaan dan wat native scrollIntoViewbiedt jij. U kunt bijvoorbeeld instellen dat het scrollen soepel verloopt en vervolgens een terugbelverzoek instellen voor wanneer het scrollen is voltooid.
Je kunt ook alle JQuery-plug-ins bekijken die zijn getagd met “scroll”.
Antwoord 6, autoriteit 3%
Hier is een snelle jQuery-plug-in om de ingebouwde browserfunctionaliteit mooi in kaart te brengen:
$.fn.ensureVisible = function () { $(this).each(function () { $(this)[0].scrollIntoView(); }); };
...
$('.my-elements').ensureVisible();
Antwoord 7, autoriteit 2%
Na vallen en opstaan kwam ik met deze functie, werkt ook met IFRAME.
function bringElIntoView(el) {
var elOffset = el.offset();
var $window = $(window);
var windowScrollBottom = $window.scrollTop() + $window.height();
var scrollToPos = -1;
if (elOffset.top < $window.scrollTop()) // element is hidden in the top
scrollToPos = elOffset.top;
else if (elOffset.top + el.height() > windowScrollBottom) // element is hidden in the bottom
scrollToPos = $window.scrollTop() + (elOffset.top + el.height() - windowScrollBottom);
if (scrollToPos !== -1)
$('html, body').animate({ scrollTop: scrollToPos });
}
Antwoord 8
Mijn gebruikersinterface heeft een verticale scrollenlijst van duimen binnen een thumbbar
Het doel was om de huidige duim recht in het midden van de thumbar te maken.
Ik begon van het goedgekeurde antwoord, maar vond dat er een paar tweaks waren om de huidige duim echt te centreren. Ik hoop dat dit iemand anders helpt.
Markup:
<ul id='thumbbar'>
<li id='thumbbar-123'></li>
<li id='thumbbar-124'></li>
<li id='thumbbar-125'></li>
</ul>
jQuery:
// scroll the current thumb bar thumb into view
heightbar = $('#thumbbar').height();
heightthumb = $('#thumbbar-' + pageid).height();
offsetbar = $('#thumbbar').scrollTop();
$('#thumbbar').animate({
scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20
});
Antwoord 9
slechts een tip. Werkt alleen op Firefox
Antwoord 10
Eenvoudige 2 stappen om naar beneden of naar beneden te scrollen.
Stap1: verkrijg de volledige hoogte van de schuifbare (conversatie) div.
Stap2: pas scrollTop toe op die schuifbare (conversatie) div met de waarde
verkregen in stap 1.
var fullHeight = $('#conversation')[0].scrollHeight;
$('#conversation').scrollTop(fullHeight);
Bovenstaande stappen moeten worden toegepast voor elke toevoeging aan de conversatie-div.
Antwoord 11
Na te hebben geprobeerd een oplossing te vinden die alle omstandigheden aankon (opties voor het animeren van de scroll, opvulling rond het object zodra het in beeld komt, werkt zelfs in obscure omstandigheden zoals in een iframe), eindigde ik uiteindelijk met het schrijven van mijn eigen oplossing hieraan. Omdat het lijkt te werken wanneer veel andere oplossingen faalden, dacht ik dat ik het zou delen:
function scrollIntoViewIfNeeded($target, options) {
var options = options ? options : {},
$win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
$container = options.$container ? options.$container : $win,
padding = options.padding ? options.padding : 20,
elemTop = $target.offset().top,
elemHeight = $target.outerHeight(),
containerTop = $container.scrollTop(),
//Everything past this point is used only to get the container's visible height, which is needed to do this accurately
containerHeight = $container.outerHeight(),
winTop = $win.scrollTop(),
winBot = winTop + $win.height(),
containerVisibleTop = containerTop < winTop ? winTop : containerTop,
containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
containerVisibleHeight = containerVisibleBottom - containerVisibleTop;
if (elemTop < containerTop) {
//scroll up
if (options.instant) {
$container.scrollTop(elemTop - padding);
} else {
$container.animate({scrollTop: elemTop - padding}, options.animationOptions);
}
} else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
//scroll down
if (options.instant) {
$container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
} else {
$container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
}
}
}
$targetis een jQuery-object met het object dat u wilt scrollen indien nodig.
options(optioneel) Kan de volgende opties in een object bevatten:
options.$container– een jQuery-object wijzend naar het bevattende element van $ doelwit (met andere woorden, het element in de DOM met de schuifbalken). Standaardinstellingen met het venster dat het $ doelelement bevat en slim genoeg is om een IFRAME-venster te selecteren. Vergeet niet om de $ in de eigenschapsnaam op te nemen.
options.padding– De opvulling in pixels om hierboven of onder het object toe te voegen wanneer deze in weergave wordt getrougeerd. Op deze manier is het niet recht tegen de rand van het raam. Standaard tot 20.
options.instant– Indien ingesteld op TRUE, wordt JQuery Animate niet gebruikt en zal de scroll onmiddellijk naar de juiste locatie verschijnen. Standaard naar false.
options.animationOptions– Alle jQuery-opties die u wilt doorgeven aan de JQuery Animate-functie (zie http://api.jQuery.com/animate/ ). Hiermee kunt u de duur van de animatie wijzigen of een callback-functie hebben uitgevoerd wanneer het scrollen is voltooid. Dit werkt alleen als options.instantis ingesteld op FALSE. Als u een Instant Animatie moet hebben, maar met een terugbellen, ingesteld, ingesteld options.animationOptions.duration = 0in plaats van het gebruik van options.instant = true.