আমার একটি স্ক্রোল রয়েছে divএবং আমি একটি লিঙ্ক রাখতে চাই যখন আমি এটিতে ক্লিক করব এটি এটি divভিতরে কোনও উপাদান দেখতে স্ক্রোল করতে বাধ্য করবে । আমি এর জাভাস্রিপটি এভাবে লিখেছি:
document.getElementById(chr).scrollIntoView(true);তবে divনিজেই স্ক্রোল করার সময় এটি সমস্ত পৃষ্ঠা স্ক্রল করে। কীভাবে ঠিক করব?
আমি এটি বলতে চাই
MyContainerDiv.getElementById(chr).scrollIntoView(true);উত্তর:
আপনি যে পিতামাতার (স্ক্রোলিং ডিভ ধারক) এর তুলনায় ভিউতে স্ক্রোল করতে চান সেই উপাদানটির শীর্ষস্থানীয় অফসেট পেতে হবে:
var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;ভেরিয়েবল টপপোস এখন স্ক্রোলিং ডিভের শীর্ষ এবং যে উপাদানটি আপনি দেখতে চান (পিক্সেলগুলিতে) চান তার মধ্যে দূরত্ব নির্ধারণ করেছে।
এখন আমরা ডিভি কে এই অবস্থানটিতে স্ক্রোল করতে বলি scrollTop:
document.getElementById('scrolling_div').scrollTop = topPos;আপনি যদি প্রোটোটাইপ জেএস ফ্রেমওয়ার্ক ব্যবহার করেন তবে আপনি একই জিনিসটি করতেন:
var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];আবার, এটি ডিভটি স্ক্রোল করবে যাতে আপনি যে উপাদানটি দেখতে চান সেটি একেবারে শীর্ষে থাকে (বা যদি এটি সম্ভব না হয় তবে যতটা নিচে দৃশ্যমান হয় তত নিচে স্ক্রল করুন)।
position: relativeনা : অন্যথায় আপনি যেমন সবে করেছি ঠিক তেমনই আপনি ডিবাগ করতে অনেক সময় ব্যয় করবেন।
overflow-yসম্পত্তিটি সেট করতে হয়েছিল, অন্যথায় এটি কাজ করছে না। সম্পত্তিটির জন্য ডিফল্ট সিএসএস মান হ'ল এবং এটি ম্যানুয়াল স্ক্রোলিংও সম্ভব করে দিলেও, জেএস কোডটি কাজ করবে না (এমনকি এটি দিয়েও নয় )scrollscrolling_divoverflowauto{psition: relative}
h4পরে তা করেছি divতারপরে articleট্যাগ এবং কেবল articleআমার জন্য কাজ করেছিল।
আপনি যে ডিআইভিতে স্ক্রোল করতে চান তাতে আপনাকে এলিমেন্টের অবস্থানটি খুঁজে বের করতে হবে এবং স্ক্রোলটপ সম্পত্তি সেট করতে হবে।
divElem.scrollTop = 0;হালনাগাদ :
উপরে বা নীচে সরানোর জন্য নমুনা কোড
function move_up() {
document.getElementById('divElem').scrollTop += 10;
}
function move_down() {
document.getElementById('divElem').scrollTop -= 10;
}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>নোট করুন যে এটির জন্য ব্রাউজার সমর্থন দুর্দান্ত নয়
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>.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>কোনও ডিভের দৃষ্টিতে কোনও উপাদান স্ক্রোল করতে কেবল প্রয়োজন হলে আপনি এই 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;আপনি সন্তানের শীর্ষ অবস্থান এবং ডিভের শীর্ষ অবস্থানের মধ্যে পার্থক্যটি স্ক্রোল করতে চান।
শিশু উপাদানগুলি ব্যবহার করে অ্যাক্সেস পান:
var divElem = document.getElementById('scrolling_div');
var numChildren = divElem.childNodes.length;ইত্যাদি
var chElem = document.getElementById('element_within_div');এবং 3 য় লাইনটি পড়া উচিত নয় var topPos = divElem.offsetTop;?
আপনি jQuery ব্যবহার করে থাকেন, আপনি নিম্নলিখিতটি ব্যবহার করে একটি অ্যানিমেশন দিয়ে স্ক্রোল করতে পারে:
$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($('element_within_div').offset().top - $(MyContainerDiv).offset().top)});অ্যানিমেশনটি isচ্ছিক: আপনি উপরে গণনা করা স্ক্রোলটপ মানটি নিতে এবং এটি সরাসরি ধারকটির স্ক্রোলটপ বৈশিষ্ট্যে রেখে দিতে পারেন।
সেটিংটি 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()আইই 11 তে সমর্থিত নয়। সুতরাং আপনি যদি আই 11 সম্পর্কে যত্নশীল না হন (আপনার সত্যিই উচিত নয়), আপনার সমস্ত প্রকল্পে এটি নির্দ্বিধায় ব্যবহার করুন। নোট করুন সমর্থন এজ জন্য বিদ্যমান! সুতরাং আপনি সত্যিই আপনার এজ / উইন্ডোজ ব্যবহারকারীদের পিছনে রাখছেন না;)
scrollTo()Windowঅবজেক্টগুলির জন্য সমস্ত বড় ব্রাউজারগুলিতে সমর্থিত হতে পারে তবে উপাদানগুলির জন্য আইই বা এজতে সমর্থিত নয়।
window.scrollToও নয় Element.scrollTo। উদাহরণস্বরূপ এজে এ চেষ্টা করে দেখুন এবং কনসোলটি পরীক্ষা করুন: কোডেপেন.আইও
এখানে একটি সহজ খাঁটি জাভাস্ক্রিপ্ট সমাধান যা লক্ষ্য নম্বর (এর মান scrollTop), টার্গেট ডিওএম উপাদান বা কিছু বিশেষ স্ট্রিংয়ের ক্ষেত্রে কাজ করে:
/**
* 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");
}
});ব্যবহারকারী অ্যানিমেটেড স্ক্রোলিং
JQuery ব্যতীত কীভাবে প্রোগ্রামালিটিকভাবে একটি <div>অনুভূমিকভাবে স্ক্রোল করবেন তার একটি উদাহরণ এখানে । উল্লম্বভাবে স্ক্রোল করতে, আপনি জাভাস্ক্রিপ্টের লেখার সাথে প্রতিস্থাপন করবেন 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);
}ডক্সের কাছে ক্রেডিট ।
অটো অ্যানিমেটেড স্ক্রোলিং
এছাড়াও, এখানে স্ক্রল করার জন্য ফাংশন রয়েছে <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);
}
}অবশেষে এটিই আমার সেবা করেছে
/** 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',
});আপনার ভিতরে একটি ডিভ উপাদান রয়েছে যাতে আপনাকে ভিতরে স্ক্রোল করতে হবে, এই টুকরা কোডটি ব্যবহার করে দেখুন
document.querySelector('div').scroll(x,y)
এটি একটি স্ক্রোল সহ একটি ডিভের ভিতরে আমার সাথে কাজ করে, আপনি যদি এই উপাদানটির উপরে মাউসটি নির্দেশ করেন এবং তারপরে নীচে বা উপরে স্ক্রোল করার চেষ্টা করেন তবে এটি আপনার সাথে কাজ করবে। যদি এটি ম্যানুয়ালি কাজ করে তবে এটিও কাজ করা উচিত
SetTimeoutমধ্যে$(document).ready({})ফাংশন এবং সেটfocus()উপাদান আপনাকে স্ক্রল করতে চান। আমার জন্য কাজ করে