Div के अंदर एक एलिमेंट को कैसे स्क्रॉल करें?

Question

मेरे पास एक स्क्रॉल है divऔर मैं एक लिंक रखना चाहता हूं जब मैं उस पर क्लिक करता हूं तो यह divएक तत्व को अंदर देखने के लिए स्क्रॉल करने के लिए मजबूर करेगा । मैंने इसका JavasSript इस तरह लिखा है:

document.getElementById(chr).scrollIntoView(true);

लेकिन यह स्क्रॉल करते हुए सभी पृष्ठ को स्क्रॉल करता है div खुद है। उसे कैसे ठीक करें?

मैं इसे ऐसे ही कहना चाहता हूं

MyContainerDiv.getElementById(chr).scrollIntoView(true);

Comments

स्क्रॉलटॉप हमेशा उपयोग करने योग्य मान नहीं लौटाता है। मैं एक का उपयोग करते हैं SetTimeoutमें $(document).ready({})समारोह और सेट focus()तत्व आप के लिए स्क्रॉल करना चाहते हैं। मेरे लिए काम करता है

— DerpyNerd

Answer 1

आपको उस तत्व की शीर्ष ऑफ़सेट प्राप्त करने की आवश्यकता है, जिसे आप उसके माता-पिता (स्क्रॉलिंग डिव कंटेनर) के सापेक्ष दृश्य में स्क्रॉल करना चाहते हैं:

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

चर टॉपपोस अब स्क्रॉलिंग डिव के शीर्ष और आपके द्वारा दिखाई देने वाले तत्व (पिक्सेल में) के बीच की दूरी पर सेट है।

अब हम div का उपयोग करते हुए उस स्थिति को स्क्रॉल करने के लिए कहते हैं scrollTop:

document.getElementById('scrolling_div').scrollTop = topPos;

यदि आप प्रोटोटाइप JS फ्रेमवर्क का उपयोग कर रहे हैं, तो आप इस तरह से एक ही काम करेंगे:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

फिर, यह div को स्क्रॉल करेगा ताकि जिस तत्व को आप देखना चाहते हैं वह बिल्कुल शीर्ष पर है (या यदि यह संभव नहीं है, तो नीचे स्क्रॉल किया जाए जहां तक ​​यह दिखाई दे सकता है)।

Comments

यह वास्तव में मददगार था! यदि आप स्क्रॉल को कई बार सेट करना चाहते हैं तो आपको अपने वर्तमान स्क्रॉल स्थान से ऑफसेट करने की आवश्यकता है। यहां बताया गया है कि मैंने इसे jQuery में कैसे किया: $ ('# scroll_div')। स्क्रॉलटॉप ($ ('# scroll_div')। स्क्रॉलटॉप () + $ ('# element_within_div')। स्थिति (शीर्ष);

— विल

सावधान रहें कि अनुरोध myElement.offsetTopकरने से रिफ्लो (लेआउट थ्रैशिंग) को ट्रिगर किया जा सकता है जो एक प्रदर्शन अड़चन

— Kestutis

स्क्रॉलिंग पैरेंट को css के साथ सेट करना याद रखें: position: relativeअन्यथा आप बहुत समय डिबगिंग में बिताएंगे जैसे मैंने अभी किया था।

— बचाने के लिए

मुझे मूल तत्व ( ) के लिए overflow-yसंपत्ति सेट करनी थी , अन्यथा यह काम नहीं कर रहा था। संपत्ति के लिए डिफ़ॉल्ट सीएसएस मूल्य है और भले ही यह मैनुअल स्क्रॉलिंग को भी संभव बनाता है, लेकिन जेएस कोड कार्य नहीं करेगा (साथ नहीं ..)scrollscrolling_divoverflowauto{psition: relative}

— एवगेनिया मनोलोवा

अभी भी 2017 में काम करता है। अतिरिक्त जानकारी: .offsetTop 0. वापस आ सकता है। फिर आपको एक मूल तत्व का उल्लेख करना चाहिए और फिर से प्रयास करना चाहिए। मैं टैग के लिए किया था कि h4उसके बाद divतो articleटैग और केवल articleमेरे लिए काम किया।

— फेनियो

Answer 2

आपको DIV में उस तत्व की स्थिति का पता लगाना होगा जिसे आप स्क्रॉल करना चाहते हैं, और स्क्रॉलटॉप संपत्ति सेट करें।

divElem.scrollTop = 0;

अपडेट :

ऊपर या नीचे जाने के लिए नमूना कोड

  function move_up() {
    document.getElementById('divElem').scrollTop += 10;
  }

  function move_down() {
    document.getElementById('divElem').scrollTop -= 10;
  }

Comments

मैं इसे देखने के लिए स्क्रॉल करना चाहता हूं, यह देखने के लिए कि यह एक निश्चित मूल्य के साथ स्क्रॉल नहीं करता है

— अमार एल्गरहि

Answer 3

विधि 1 - एक तत्व के अंदर एक तत्व को चिकनी स्क्रॉलिंग

var box = document.querySelector('.box'),
    targetElm = document.querySelector('.boxChild'); // <-- Scroll to here within ".box"

document.querySelector('button').addEventListener('click', function(){
   scrollToElm( box, targetElm , 600 );   
});


/////////////

function scrollToElm(container, elm, duration){
  var pos = getRelativePos(elm);
  scrollTo( container, pos.top , 2);  // duration in seconds
}

function getRelativePos(elm){
  var pPos = elm.parentNode.getBoundingClientRect(), // parent pos
      cPos = elm.getBoundingClientRect(), // target pos
      pos = {};

  pos.top    = cPos.top    - pPos.top + elm.parentNode.scrollTop,
  pos.right  = cPos.right  - pPos.right,
  pos.bottom = cPos.bottom - pPos.bottom,
  pos.left   = cPos.left   - pPos.left;

  return pos;
}
    
function scrollTo(element, to, duration, onDone) {
    var start = element.scrollTop,
        change = to - start,
        startTime = performance.now(),
        val, now, elapsed, t;

    function animateScroll(){
        now = performance.now();
        elapsed = (now - startTime)/1000;
        t = (elapsed/duration);

        element.scrollTop = start + change * easeInOutQuad(t);

        if( t < 1 )
            window.requestAnimationFrame(animateScroll);
        else
            onDone && onDone();
    };

    animateScroll();
}

function easeInOutQuad(t){ return t<.5 ? 2*t*t : -1+(4-2*t)*t };

.box{ width:80%; border:2px dashed; height:180px; overflow:auto; }
.boxChild{ 
  margin:600px 0 300px; 
  width: 40px;
  height:40px;
  background:green;
}

<button>Scroll to element</button>
<div class='box'>
  <div class='boxChild'></div>
</div>

विधि 2 - Element.scrollIntoView का उपयोग कर :

ध्यान दें कि इस के लिए ब्राउज़र समर्थन महान नहीं है

var targetElm = document.querySelector('.boxChild'),  // reference to scroll target
    button = document.querySelector('button');        // button that triggers the scroll
  
// bind "click" event to a button 
button.addEventListener('click', function(){
   targetElm.scrollIntoView()
})

.box {
  width: 80%;
  border: 2px dashed;
  height: 180px;
  overflow: auto;
  scroll-behavior: smooth; /* <-- for smooth scroll */
}

.boxChild {
  margin: 600px 0 300px;
  width: 40px;
  height: 40px;
  background: green;
}

<button>Scroll to element</button>
<div class='box'>
  <div class='boxChild'></div>
</div>

विधि 3 - CSS स्क्रॉल-व्यवहार का उपयोग करना :

.box {
  width: 80%;
  border: 2px dashed;
  height: 180px;
  overflow-y: scroll;
  scroll-behavior: smooth; /* <--- */
}

#boxChild {
  margin: 600px 0 300px;
  width: 40px;
  height: 40px;
  background: green;
}

<a href='#boxChild'>Scroll to element</a>
<div class='box'>
  <div id='boxChild'></div>
</div>

Comments

ध्यान दें कि स्क्रॉल-व्यवहार IE / Edge / Safari में समर्थित नहीं है

— बन्द करता है

@sheats - यह ठीक कहता है कि एमडीएन प्रलेखन लिंक में जो मैंने बड़े फ़ॉन्ट आकार में रखा था। यहां तक ​​कि अगर यह उन ब्राउज़रों के लिए काम नहीं करता है, तो इसका मतलब यह नहीं है कि आपको इसका उपयोग नहीं करना चाहिए। कोई "नियम" नहीं है सब कुछ सभी ब्राउज़रों पर समान व्यवहार करना चाहिए। यदि आधुनिक ब्राउज़र जादू कर सकते हैं, तो उन्हें जादू करने दें।

— विस्कॉन्सिन

यह पोस्ट एक स्क्रॉल करने योग्य तत्व के बजाय पूरे दस्तावेज़ को स्क्रॉल करने के बारे में है।

@ DoMiNeLa10 - यह एक धारणा है। ओपी ने एक अनियंत्रित उदाहरण दिया हो सकता है जो उसके मुद्दे को स्पष्ट करने के लिए है। इसके अलावा, ओपी मुख्य चिंता का विषय नहीं है, बल्कि खोज इंजन से आने वाले लोग एक पूर्ण समाधान की तलाश में हैं, और विशेष रूप से ओपी की जरूरतों के लिए विशेष रूप से जवाब देने से उन्हें मदद नहीं मिलेगी, और इस वेबसाइट का उद्देश्य ठोस उत्तर बनाना है जो कई मदद कर सकता है यथासंभव। मेरा उत्तर दोनों प्रदान करता है ।

— vsync

Answer 4

किसी तत्व को div के मद्देनजर स्क्रॉल करने के लिए, यदि आवश्यक हो, तो आप इस scrollIfNeededफ़ंक्शन का उपयोग कर सकते हैं :

function scrollIfNeeded(element, container) {
  if (element.offsetTop < container.scrollTop) {
    container.scrollTop = element.offsetTop;
  } else {
    const offsetBottom = element.offsetTop + element.offsetHeight;
    const scrollBottom = container.scrollTop + container.offsetHeight;
    if (offsetBottom > scrollBottom) {
      container.scrollTop = offsetBottom - container.offsetHeight;
    }
  }
}

document.getElementById('btn').addEventListener('click', ev => {
  ev.preventDefault();
  scrollIfNeeded(document.getElementById('goose'), document.getElementById('container'));
});

.scrollContainer {
  overflow-y: auto;
  max-height: 100px;
  position: relative;
  border: 1px solid red;
  width: 120px;
}

body {
  padding: 10px;
}

.box {
  margin: 5px;
  background-color: yellow;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#goose {
  background-color: lime;
}

<div id="container" class="scrollContainer">
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div id="goose" class="box">goose</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
</div>

<button id="btn">scroll to goose</button>

Comments

यह वास्तव में मददगार था। मैंने थोड़ा संघर्ष किया क्योंकि मैं इस स्थिति से चूक गया था: कंटेनर पर रिश्तेदार। यह महत्वपूर्ण था!

— ब्रहर

Answer 5

कोड होना चाहिए:

var divElem = document.getElementById('scrolling_div');
var chElem = document.getElementById('element_within_div');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;

आप बच्चे की शीर्ष स्थिति और तलाक की शीर्ष स्थिति के बीच अंतर को स्क्रॉल करना चाहते हैं।

उपयोग करने वाले बाल तत्वों तक पहुँच प्राप्त करें:

var divElem = document.getElementById('scrolling_div'); 
var numChildren = divElem.childNodes.length;

और इसी तरह....

Comments

क्या दूसरी पंक्ति वास्तव में नहीं पढ़ी जानी चाहिए var chElem = document.getElementById('element_within_div');और तीसरी पंक्ति पढ़ी जानी चाहिए var topPos = divElem.offsetTop;?

— 18

Answer 6

यदि आप jQuery का उपयोग कर रहे हैं, तो आप निम्नलिखित का उपयोग करके एक एनीमेशन के साथ स्क्रॉल कर सकते हैं:

$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});

एनीमेशन वैकल्पिक है: आप ऊपर की गणना की गई स्क्रॉलटॉप मूल्य भी ले सकते हैं और इसे सीधे कंटेनर के स्क्रॉलटॉप संपत्ति में डाल सकते हैं।

Answer 7

नेटिव जेएस, क्रॉस ब्राउज़र, स्मूथ स्क्रॉल (अपडेट 2020)

सेटिंग ScrollTopवांछित परिणाम देता है, लेकिन स्क्रॉल बहुत अचानक है। jqueryचिकनी स्क्रॉल का उपयोग करना एक विकल्प नहीं था। तो यहाँ काम करने का एक मूल तरीका है जो सभी प्रमुख ब्राउज़रों का समर्थन करता है। संदर्भ - कैनुसे

// get the "Div" inside which you wish to scroll (i.e. the container element)
const El = document.getElementById('xyz');

// Lets say you wish to scroll by 100px, 
El.scrollTo({top: 100, behavior: 'smooth'});

// If you wish to scroll until the end of the container
El.scrollTo({top: El.scrollHeight, behavior: 'smooth'});

बस!

---

और यहाँ एक संदिग्ध के लिए काम स्निपेट है -

document.getElementById('btn').addEventListener('click', e => {
  e.preventDefault();
  // smooth scroll
  document.getElementById('container').scrollTo({top: 175, behavior: 'smooth'});
});

/* just some styling for you to ignore */
.scrollContainer {
  overflow-y: auto;
  max-height: 100px;
  position: relative;
  border: 1px solid red;
  width: 120px;
}

body {
  padding: 10px;
}

.box {
  margin: 5px;
  background-color: yellow;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#goose {
  background-color: lime;
}

<!-- Dummy html to be ignored -->
<div id="container" class="scrollContainer">
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div id="goose" class="box">goose</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
  <div class="box">duck</div>
</div>

<button id="btn">goose</button>

अद्यतन: जैसा कि आप टिप्पणियों में देख सकते हैं, ऐसा लगता है कि Element.scrollTo()IE11 में समर्थित नहीं है। इसलिए यदि आप IE11 के बारे में परवाह नहीं करते हैं (तो आपको वास्तव में नहीं करना चाहिए), अपनी सभी परियोजनाओं में इसका उपयोग करने के लिए स्वतंत्र महसूस करें। ध्यान दें कि एज के लिए समर्थन मौजूद है! तो आप वास्तव में अपने एज / विंडोज उपयोगकर्ताओं को पीछे नहीं छोड़ रहे हैं;)

संदर्भ

Comments

scrollTo()Windowवस्तुओं के लिए सभी प्रमुख ब्राउज़रों में समर्थित हो सकता है लेकिन तत्वों के लिए IE या एज में समर्थित नहीं है।

— टिम डाउन

कैनिअस के अनुसार , यह IE11 और एज में समर्थित है। इन ब्राउज़रों पर व्यक्तिगत रूप से परीक्षण नहीं किया गया है, लेकिन यह समर्थित प्रतीत होता है।

— निकेत पाठक

वह window.scrollToनहीं Element.scrollTo। उदाहरण के लिए एज में यह कोशिश करें, और कंसोल की जांच करें: codepen.io/timdown/pen/abzVEMB

— टिम डाउन

तुम सही हो। IE11 समर्थित नहीं है। हालाँकि एज v76 (रेफरी) और इसके बाद के संस्करण का समर्थन किया जा रहा है

— निकेत पाठक

Answer 8

दो तथ्य हैं:

1) कंपोनेंट स्क्रोलइन्टो व्यू सफारी द्वारा समर्थित नहीं है।

2) जेएस फ्रेमवर्क jQuery इस तरह से काम कर सकता है:

parent = 'some parent div has css position==="fixed"' || 'html, body';

$(parent).animate({scrollTop: $(child).offset().top}, duration)

Answer 9

यहां एक सरल शुद्ध जावास्क्रिप्ट समाधान है जो एक लक्ष्य संख्या (मूल्य के लिए scrollTop), लक्ष्य DOM तत्व, या कुछ विशेष स्ट्रिंग मामलों के लिए काम करता है:

/**
 * target - target to scroll to (DOM element, scrollTop Number, 'top', or 'bottom'
 * containerEl - DOM element for the container with scrollbars
 */
var scrollToTarget = function(target, containerEl) {
    // Moved up here for readability:
    var isElement = target && target.nodeType === 1,
        isNumber = Object.prototype.toString.call(target) === '[object Number]';

    if (isElement) {
        containerEl.scrollTop = target.offsetTop;
    } else if (isNumber) {
        containerEl.scrollTop = target;
    } else if (target === 'bottom') {
        containerEl.scrollTop = containerEl.scrollHeight - containerEl.offsetHeight;
    } else if (target === 'top') {
        containerEl.scrollTop = 0;
    }
};

और यहाँ उपयोग के कुछ उदाहरण हैं:

// Scroll to the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget('top', scrollableDiv);

या

// Scroll to 200px from the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget(200, scrollableDiv);

या

// Scroll to targetElement
var scrollableDiv = document.getElementById('scrollable_div');
var targetElement= document.getElementById('target_element');
scrollToTarget(targetElement, scrollableDiv);

Answer 10

JQuery और चेतन का उपयोग करने का एक और उदाहरण।

var container = $('#container');
var element = $('#element');

container.animate({
    scrollTop: container.scrollTop = container.scrollTop() + element.offset().top - container.offset().top
}, {
    duration: 1000,
    specialEasing: {
        width: 'linear',
        height: 'easeOutBounce'
    },
    complete: function (e) {
        console.log("animation completed");
    }
});

Answer 11

उपयोगकर्ता एनिमेटेड स्क्रॉलिंग

यहाँ JQuery के बिना<div> , प्रोग्राम को क्षैतिज रूप से स्क्रॉल करने का तरीका बताया गया है । खड़ी स्क्रॉल करने के लिए, आप JavaScript का लेखन करने के लिए जगह लेंगे साथ , बजाय। scrollLeftscrollTop

JSFiddle

https://jsfiddle.net/fNPvf/38536/

एचटीएमएल

<!-- Left Button. -->
<div style="float:left;">
    <!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
    <input type="button" value="«" style="height: 100px;" onmousedown="scroll('scroller',3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
    <!-- <3 -->
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
    <!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
    <input type="button" value="»" style="height: 100px;" onmousedown="scroll('scroller',-3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>

जावास्क्रिप्ट

// Declare the Shared Timer.
var TIMER_SCROLL;
/** 
Scroll function. 
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scroll(id, d, del){
    // Scroll the element.
    document.getElementById(id).scrollLeft += d;
    // Perform a delay before recursing this function again.
    TIMER_SCROLL = setTimeout("scroll('"+id+"',"+d+", "+del+");", del);
 }

Dux को श्रेय ।

---

ऑटो एनिमेटेड स्क्रॉलिंग

इसके अलावा, यहां <div>बाईं और दाईं ओर पूरी तरह से स्क्रॉल करने के लिए फ़ंक्शन हैं । यहाँ हम केवल एक चीज बदलते हैं, हम यह देखने के लिए कि क्या पुन: स्क्रॉल करने के लिए एक पुनरावर्ती कॉल करने से पहले स्क्रॉल का पूर्ण विस्तार उपयोग किया गया है, यह देखने के लिए एक जाँच करें।

JSFiddle

https://jsfiddle.net/0nLc2fhh/1/

एचटीएमएल

<!-- Left Button. -->
<div style="float:left;">
    <!-- (1) Whilst it's pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
    <input type="button" value="«" style="height: 100px;" onclick="scrollFullyLeft('scroller',3, 10);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
  <!-- <3 -->
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
    <!-- As (1). (Use a negative value of 'd' to decrease the scroll.) -->
    <input type="button" value="»" style="height: 100px;" onclick="scrollFullyRight('scroller',3, 10);"/>
</div>

जावास्क्रिप्ट

// Declare the Shared Timer.
var TIMER_SCROLL;
/** 
Scroll fully left function; completely scrolls  a <div> to the left, as far as it will go.
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyLeft(id, d, del){
    // Fetch the element.
    var el = document.getElementById(id);
    // Scroll the element.
    el.scrollLeft += d;
    // Have we not finished scrolling yet?
    if(el.scrollLeft < (el.scrollWidth - el.clientWidth)) {
        TIMER_SCROLL = setTimeout("scrollFullyLeft('"+id+"',"+d+", "+del+");", del);
    }
}

/** 
Scroll fully right function; completely scrolls  a <div> to the right, as far as it will go.
@param id  Unique id of element to scroll.
@param d   Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyRight(id, d, del){
    // Fetch the element.
    var el = document.getElementById(id);
    // Scroll the element.
    el.scrollLeft -= d;
    // Have we not finished scrolling yet?
    if(el.scrollLeft > 0) {
        TIMER_SCROLL = setTimeout("scrollFullyRight('"+id+"',"+d+", "+del+");", del);
    }
}

Answer 12

यह वही है जिसने आखिरकार मेरी सेवा की है

/** Set parent scroll to show element
 * @param element {object} The HTML object to show
 * @param parent {object} The HTML object where the element is shown  */
var scrollToView = function(element, parent) {
    //Algorithm: Accumulate the height of the previous elements and add half the height of the parent
    var offsetAccumulator = 0;
    parent = $(parent);
    parent.children().each(function() {
        if(this == element) {
            return false; //brake each loop
        }
        offsetAccumulator += $(this).innerHeight();
    });
    parent.scrollTop(offsetAccumulator - parent.innerHeight()/2);
}

Answer 13

ब्राउज़र स्वचालित रूप से एक तत्व पर स्क्रॉल करता है जो फ़ोकस हो जाता है, इसलिए आप उस तत्व को लपेटने के लिए भी क्या कर सकते हैं जिसे आपको स्क्रॉल करने की आवश्यकता है <a>...</a>और फिर जब आपको स्क्रॉल की आवश्यकता होती है तो उस पर ध्यान केंद्रित करेंa

Answer 14

तत्व का चयन करने के बाद बस scrollIntoViewनीचे दिए गए विकल्प के साथ फ़ंक्शन का उपयोग करें :

const option = {
  top: 0, // number,
  left: 0, // number,
  behavior: 'auto', // auto or smooth 
    // - auto for one jump motion and smooth for animated motion -
};

तो इस पोस्ट का जवाब है:

const el = document.getElementById('id-name');
el.scrollIntoView({
  top: 0,
  left: 0,
  behavior: 'auto',
});

Answer 15

आपके पास एक दिव्य तत्व है जिसे आपको अंदर स्क्रॉल करने की आवश्यकता है, इस कोड का टुकड़ा आज़माएं

document.querySelector('div').scroll(x,y)

यह मेरे साथ एक स्क्रॉल के साथ एक डिव के अंदर काम करता है, यह आपके साथ काम करना चाहिए अगर आपने इस तत्व पर माउस को इंगित किया और फिर नीचे या ऊपर स्क्रॉल करने की कोशिश की। यदि यह मैन्युअल रूप से काम करता है, तो इसे भी काम करना चाहिए