58 views

Hoe scrol ik naar een element met JavaScript?

Hosted by Code Expert
javascript

Ik probeer de pagina te verplaatsen naar een <div>-element.

Ik heb de volgende code tevergeefs geprobeerd:

document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';

Antwoord 1, autoriteit 100%

U kunt een anker gebruiken om de div te “focussen”. D.w.z.:

<div id="myDiv"></div>

en gebruik dan het volgende javascript:

// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";

Antwoord 2, autoriteit 92%

scrollIntoView werkt goed:

document.getElementById("divFirst").scrollIntoView();

volledige referentie in de MDN-documenten:
https://developer.mozilla.org/en-US/docs /Web/API/Element.scrollIntoView

Antwoord 3, autoriteit 71%

uw vraag en de antwoorden zien er anders uit. Ik weet niet of ik me vergis, maar voor degenen die googlen en hier komen, zou mijn antwoord het volgende zijn:

  1. Mijn antwoord op stackoverflow
  2. Een vergelijkbare vraag

Mijn antwoord uitgelegd:

hier is een eenvoudig javascript voor

roep dit aan als u door het scherm moet scrollen naar een element met id=”yourSpecificElementId”

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

dwz. voor de bovenstaande vraag, als het de bedoeling is om het scherm naar de div te scrollen met id ‘divFirst’

de code zou zijn: window.scroll(0,findPos(document.getElementById("divFirst")));

en je hebt deze functie nodig voor de werking:

//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];
    }
}

het scherm zal naar uw specifieke element worden gescrolld.

Antwoord 4, autoriteit 42%

Voor Chrome en Firefox

Ik heb hier een beetje naar gekeken en ik heb dit bedacht, wat op de een of andere manier de meest natuurlijke manier lijkt om het te doen. Natuurlijk is dit nu mijn persoonlijke favoriete scroll. 🙂

const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
  top: y,
  behavior: 'smooth'
});

Voor IE-, Edge- en Safari-supporters

Merk op dat window.scroll({ ...options })niet wordt ondersteund in IE, Edge en Safari. In dat geval is het waarschijnlijk het beste om te gebruiken
element.scrollIntoView(). (Ondersteund op IE 6). U kunt hoogstwaarschijnlijk(lees: niet getest) opties doorgeven zonder bijwerkingen.

Deze kunnen natuurlijk worden verpakt in een functie die zich gedraagt volgens de browser die wordt gebruikt.

Antwoord 5, autoriteit 10%

Het beste, kortste antwoord dat werkt, zelfs met animatie-effecten:

var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

Als je een vaste navigatiebalk hebt, trek je de hoogte ervan af van de bovenste waarde, dus als je vaste balkhoogte 70 px is, ziet regel 2 er als volgt uit:

window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});

Uitleg:
Regel 1 krijgt de elementpositie
Regel 2 scroll naar elementpositie; behavioreigenschap voegt een vloeiend geanimeerd effect toe

Antwoord 6, autoriteit 8%

Je kunt de focus op element zetten. Het werkt beter dan scrollIntoView

node.setAttribute('tabindex', '-1')

node.focus()

node.removeAttribute('tabindex')

Antwoord 7, autoriteit 5%

Probeer dit:

var divFirst = document.getElementById("divFirst");
divFirst.style.visibility = 'visible'; 
divFirst.style.display = 'block';  
divFirst.tabIndex = "-1";  
divFirst.focus();

bijv. @:

http://jsfiddle.net/Vgrey/

Antwoord 8, autoriteit 5%

We kunnen op 3 manieren implementeren:

Opmerking:

“automatisch scrollen” => Het specifieke element

“scrollable-div” => Het schuifbare gebied div

Methode 1:

document.querySelector('.automatic-scroll').scrollIntoView({
     behavior: 'smooth'
});

Methode 2:

location.href = "#automatic-scroll";

Methode 3:

$('#scrollable-div').animate({
   scrollTop: $('#automatic-scroll').offset().top - $('#scrollable-div').offset().top + 
   $('#scrollable-div').scrollTop()
})

Belangrijke opmerking: methode 1 & methode 2 is handig als de hoogte van het schuifbare gebied “auto” is. Methode 3 is handig als we de hoogte van het schuifbare gebied gebruiken, zoals “calc(100vh – 200px)“.

Antwoord 9, autoriteit 4%

Om naar een bepaald element te scrollen, heb je deze alleen-javascript-oplossing hieronder gemaakt.

Eenvoudig gebruik:

EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);

Motorobject (u kunt spelen met filter, fps-waarden):

/**
 *
 * 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);
    }
};

Antwoord 10, Autoriteit 3%

Hier is een functie die een optionele offset kan bevatten voor die vaste headers. Geen externe bibliotheken nodig. 

function scrollIntoView(selector, offset = 0) {
  window.scroll(0, document.querySelector(selector).offsetTop - offset);
}

Je kunt de hoogte van een element bepalen met JQuery en ernaartoe scrollen. 

var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)

Update maart 2018

Scroll naar dit antwoord zonder JQuery te gebruiken

scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)

Antwoord 11

Vergelijkbaar met de oplossing van @caveman

const element = document.getElementById('theelementsid');
if (element) {
    window.scroll({
        top: element.scrollTop,
        behavior: 'smooth',
    }) 
}

Antwoord 12

Een methode die ik vaak gebruik om door een container naar de inhoud te scrollen.

/**
@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');
    }
};

Als u wereldwijd wilt overschrijven, kunt u ook het volgende doen:

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');
    }
};

Antwoord 13

Focus kan alleen worden ingesteld op interactieve elementen… Div vertegenwoordigt alleen een logisch gedeelte van de pagina.

Misschien kunt u de randen rond div instellen of de kleur ervan wijzigen om een focus te simuleren. En ja Zichtbaarheid is geen focus.

Antwoord 14

Ik denk dat als je een tabindex toevoegt aan je div, deze focus kan krijgen:

<div class="divFirst" tabindex="-1">
</div>

Ik denk echter niet dat het geldig is, tabindex kan alleen worden toegepast op a, area, button, input, object, select en textarea. Maar probeer het eens.

Antwoord 15

Vanwege het gedrag werkt “smooth” niet in Safari, Safari ios, Explorer. Ik schrijf meestal een eenvoudige functie met 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)
    })
  }
})();

Antwoord 16

Je kunt je niet concentreren op een div. U kunt zich alleen concentreren op een invoerelement in die div. U moet ook element.focus() gebruiken in plaats van display()

Antwoord 17

Na veel om me heen te hebben gekeken, werkte dit uiteindelijk voor mij:

  1. Vind/vind div in je domein met een schuifbalk.
    Bij mij zag het er zo uit:
    “div class=”table_body table_body_div” scroll_top=”0″ scroll_left=”0″ style=”width: 1263px; hoogte: 499px;”

  2. Ik heb het gevonden met deze xpath: //div[@class=’table_body table_body_div’]

  3. JavaScript gebruikt om scrollen als volgt uit te voeren:
    (JavascriptExecutor) stuurprogramma).executeScript(“argumenten[0].scrollLeft = argumenten[1];”,element,2000);

2000 is het aantal pixels dat ik naar rechts wilde scrollen.
Gebruik scrollTop in plaats van scrollLeft als je je div naar beneden wilt scrollen.

Opmerking: ik heb geprobeerd scrollIntoView te gebruiken, maar het werkte niet goed omdat mijn webpagina meerdere divs had. Het zal werken als je maar één hoofdvenster hebt waar de focus ligt.
Dit is de beste oplossing die ik ben tegengekomen als je jQuery niet wilt gebruiken, wat ik niet wilde.

Antwoord 18

Als je html wilt gebruiken, kun je dit gewoon gebruiken:

a href="samplewebsite.com/subdivision.html#id

en maak er een html-link van naar het specifieke element-ID. Het is in feite de getElementByIdhtml-versie.

Antwoord 19

probeer deze functie 

function navigate(divId) {
$j('html, body').animate({ scrollTop: $j("#"+divId).offset().top }, 1500);
}

Geef de div id door als parameter, het zal werken. Ik gebruik het al

Previous articleKan een onderliggende rij niet toevoegen of bijwerken: een beperking van een refererende sleutel mislukt
Next articleHoe bytearray naar string te converteren in python

Other episodes

Is een functie die Math.random() puur aanroept?

javascript Code Expert - 0
Is het volgende een pure functie? function test(min,max) { return Math.random() * (max - min) + min; } Ik heb begrepen dat een pure...
Read more

Ik wil een tekst of regel met ellips afkappen met JavaScript

javascript Code Expert - 0
Ik ben op zoek naar een eenvoudig script dat een string kan afkappen met ellips (...) Ik wil iets als 'this is a very long...
Read more

firebase.firestore() is geen functie bij het initialiseren van Cloud Firestore

javascript Code Expert - 0
Toen ik Firebase Cloud Firestore probeerde te initialiseren, kwam ik de volgende fout tegen: Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore is geen functie Ik heb eerder firebase...
Read more

Hoe krijg ik een hoogte van een toetsenbord in React-Native?

javascript Code Expert - 0
Ik gebruik React-Navigation in mijn app en de app bestaat uit StackNavigator met meerdere schermen, waarvan sommige schermen TextInput hebben met autoFocus={true} Probleem:op deze schermen...
Read more

ReferenceError: prestatie is niet gedefinieerd bij gebruik van performance.now()

javascript Code Expert - 0
Ik krijg een foutmelding ReferenceError: performance is not definedwanneer ik performance.now()om de uitvoeringstijd van een functieaanroep te meten: export async function find(someId: string, ctx: context.IContext)...
Read more

Herhaal een reeks objecten in Typescript

javascript Code Expert - 0
Ik moet de reeks objecten in hoek 2 herhalen en de weergave van de tekenreekslengte voor een bepaalde sleutel in het object beperken. this.productService.loadAllProducts(product).subscribe(data =>...
Read more

Zet lengtebeperking in een TextField in react js

javascript Code Expert - 0
Ik neem een ​​invoer van de gebruiker van het kaartnummer en wil dat de lengte die door de gebruiker wordt ingevoerd niet kleiner en...
Read more

© Copyright - Code Expert 2021