ฉันมีการเลื่อนdivและฉันต้องการที่จะมีลิงค์เมื่อฉันคลิกที่มันมันจะบังคับdivให้เลื่อนเพื่อดูองค์ประกอบภายใน ฉันเขียน JavasSript ของมันเช่นนี้:

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

แต่สิ่งนี้จะเลื่อนหน้าทั้งหมดในขณะที่เลื่อนdivตัวเอง จะแก้ไขได้อย่างไร?

ฉันอยากพูดแบบนั้น

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

คุณต้องได้รับการชดเชยสูงสุดขององค์ประกอบที่คุณต้องการเลื่อนดู, สัมพันธ์กับแม่ของมัน (คอนเทนเนอร์ div เลื่อน):

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

ตอนนี้ตัวแปร topPos ถูกตั้งค่าเป็นระยะห่างระหว่างส่วนบนของตัวเลื่อนและองค์ประกอบที่คุณต้องการให้มองเห็น (เป็นพิกเซล)

ตอนนี้เราบอกให้ div เลื่อนไปยังตำแหน่งนั้นโดยใช้scrollTop:

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

หากคุณใช้เฟรมเวิร์ก JS ต้นแบบคุณต้องทำสิ่งนี้ดังนี้:

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

อีกครั้งสิ่งนี้จะเลื่อน div เพื่อให้องค์ประกอบที่คุณต้องการดูนั้นอยู่ที่ด้านบนสุด (หรือถ้าเป็นไปไม่ได้เลื่อนไปไกลที่สุดเท่าที่จะเป็นไปได้)

คุณจะต้องค้นหาตำแหน่งขององค์ประกอบใน DIV ที่คุณต้องการเลื่อนไปและตั้งค่าคุณสมบัติ scrollTop

divElem.scrollTop = 0;

อัปเดต :

โค้ดตัวอย่างเพื่อเลื่อนขึ้นหรือลง

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

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

วิธีที่ 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 scroll-behavior :

.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>

ในการเลื่อนองค์ประกอบไปยังมุมมองของ 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>

รหัสควรเป็น:

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

คุณต้องการเลื่อนความแตกต่างระหว่างอันดับสูงสุดของเด็กและอันดับสูงสุดของ div

รับสิทธิ์เข้าถึงองค์ประกอบย่อยโดยใช้:

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

และอื่น ๆ ....

หากคุณใช้ jQuery คุณสามารถเลื่อนด้วยภาพเคลื่อนไหวโดยใช้สิ่งต่อไปนี้:

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

ภาพเคลื่อนไหวเป็นตัวเลือก: คุณสามารถนำค่า scrollTop มาคำนวณข้างต้นและนำไปไว้ในคุณสมบัติscrollTopของคอนเทนเนอร์ได้โดยตรง

Native JS, Cross Browser, Smooth Scroll (อัปเดต 2020)

การตั้งค่าScrollTopจะให้ผลลัพธ์ที่ต้องการ แต่การเลื่อนอย่างกระทันหัน การใช้jqueryเพื่อให้การเลื่อนราบรื่นไม่ได้เป็นตัวเลือก ดังนั้นนี่เป็นวิธีดั้งเดิมในการทำงานให้สำเร็จซึ่งรองรับเบราว์เซอร์หลักทั้งหมด การอ้างอิง - caniuse

// 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 (คุณไม่ควรทำจริงๆ) คุณสามารถใช้มันกับทุกโครงการของคุณได้ โปรดทราบว่ามีการรองรับสำหรับ Edge! ดังนั้นคุณไม่ได้ทิ้งผู้ใช้ Edge / Windows ไว้เบื้องหลัง)

การอ้างอิง

มีข้อเท็จจริงสองประการ:

1) Safari ไม่สนับสนุนคอมโพเนนต์ scrollIntoView

2) JS Framework jQuery สามารถทำงานได้ดังนี้:

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

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

ต่อไปนี้เป็นโซลูชัน JavaScript แบบง่ายที่ทำงานกับหมายเลขเป้าหมาย (ค่า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);

อีกตัวอย่างของการใช้ 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");
    }
});

ผู้ใช้เคลื่อนไหวเลื่อน

นี่คือตัวอย่างของวิธีการทางโปรแกรมเลื่อนหนึ่ง<div>ในแนวนอนโดยไม่ต้อง JQuery เพื่อเลื่อนในแนวตั้งคุณจะแทนที่ JavaScript เขียนของscrollLeftด้วยscrollTopแทน

JSFiddle

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

HTML

<!-- 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>

JavaScript

// 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/

HTML

<!-- 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>

JavaScript

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

นี่คือสิ่งที่ได้ทำหน้าที่ในที่สุดฉัน

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

เบราว์เซอร์ทำการเลื่อนโดยอัตโนมัติไปยังองค์ประกอบที่ได้รับการโฟกัสดังนั้นสิ่งที่คุณสามารถทำได้เพื่อห่อองค์ประกอบที่คุณจำเป็นต้องเลื่อนเข้ามา<a>...</a>แล้วเมื่อคุณต้องการเลื่อนเพียงแค่ตั้งค่าโฟกัสที่a

หลังจากเลือกองค์ประกอบเพียงใช้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',
});

เนื่องจากคุณมีองค์ประกอบ div ที่คุณต้องเลื่อนภายในลองใช้รหัสชิ้นนี้

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

สิ่งนี้ใช้ได้กับฉันภายใน div ด้วยสโครลนี่ควรทำงานกับคุณในกรณีที่คุณชี้เมาส์ไปที่องค์ประกอบนี้แล้วลองเลื่อนลงหรือขึ้น ถ้ามันทำงานด้วยตนเองก็ควรทำงานด้วย