যখন একটি বোতাম টিপানো হয় তখন আমি কোনও লক্ষ্যে স্ক্রোল করতে সক্ষম হতে চাই। আমি এই জাতীয় কিছু ভাবছিলাম।
<button (click)="scroll(#target)">Button</button>
এবং আমার component.tsপদ্ধতিতে।
scroll(element) {
window.scrollTo(element.yPosition)
}
আমি জানি যে উপরের কোডটি বৈধ নয় তবে কেবল আমি কী ভাবছিলাম তা দেখানোর জন্য। আমি কৌনিক 4 টি শিখতে শুরু করেছি অ্যাঙ্গুলারের কোনও পূর্ব অভিজ্ঞতা নেই। আমি এ জাতীয় কিছু অনুসন্ধান করে চলেছি তবে সমস্ত উদাহরণ AngularJs এ যা কৌণিক 4 এর সাথে অনেকটাই আলাদা
উত্তর:
আপনি এটি এইভাবে করতে পারে:
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
এবং তারপরে আপনার উপাদানটিতে:
scroll(el: HTMLElement) {
el.scrollIntoView();
}
সম্পাদনা: আমি মন্তব্যগুলি দেখছি যে এই উপাদানটির অপরিজ্ঞাপিত হওয়ার কারণে এটি আর কাজ করে না। আমি কৌণিক 7 এ একটি স্ট্যাকব্লিটজ উদাহরণ তৈরি করেছি এবং এটি এখনও কার্যকর হয়। কেউ দয়া করে উদাহরণ প্রদান করতে পারেন যেখানে এটি কাজ করে না?
scrollফাংশনে যে উপাদানটি দিতে চান তা উল্লেখ করতে সহায়তা করে । লক্ষ্য করুন যে ক্লিক ইভেন্টটি কল করে scroll(target)। আপনি যদি উপাদানটি পাস না করে উপাদানটির ভিতরে থেকে উপাদানটিতে অ্যাক্সেস পেতে চান, আপনি ব্যবহার করতে পারেন @ViewChild।
id="target"পরিবর্তে #targetএবং এর পরিবর্তে ব্যবহার করার আগে এবং এটি আমাকে "এল ইন্ডিফাইন্ড ত্রুটি" দিয়েছে!
#targetঅভ্যন্তরের ভিতরে থাকে তবে অপরিবর্তিত ত্রুটি ঘটবে তবে *ngIfআপনি @ViewChild@ abbastec থেকে লিঙ্কটিতে পদ্ধতিটি ব্যবহার করলে এটি কাজ করা উচিত
এখানে আমি Angular 4 ব্যবহার করে এটি কীভাবে করেছি।
টেমপ্লেট
<div class="col-xs-12 col-md-3">
<h2>Categories</h2>
<div class="cat-list-body">
<div class="cat-item" *ngFor="let cat of web.menu | async">
<label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
</div>
</div>
</div>
উপাদানটিতে এই ফাংশনটি যুক্ত করুন
scroll(id) {
console.log(`scrolling to ${id}`);
let el = document.getElementById(id);
el.scrollIntoView();
}
বাস্তবে এমন কোনো একটি বিশুদ্ধ জাভাস্ক্রিপ্ট উপায় ব্যবহার না করেই এই কাজ করা সম্ভব হয় setTimeoutবা requestAnimationFrameবা jQuery এর।
সংক্ষেপে, আপনি যে স্ক্রোল করতে এবং ব্যবহার করতে চান তাতে স্ক্রোলভিউতে উপাদানটি সন্ধান করুন scrollIntoView।
el.scrollIntoView({behavior:"smooth"});
এখানে একজন বরখাস্ত ।
কৌণিক 7 এ নিখুঁত কাজ করে
এইচটিএমএল
<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>
উপাদান মধ্যে
scroll(el: HTMLElement) {
el.scrollIntoView({behavior: 'smooth'});
}
#targetবোতামটির পরে সংজ্ঞায়িত করা থাকলে এটি কাজ করবে না , যা যদি আপনার কাছে উদাহরণস্বরূপ একটি ভাসমান শিরোলেখ থাকে তবে এটি প্রাসঙ্গিক ...
জনের সঠিক উত্তর রয়েছে এবং এটি আমার কৌণিক 5 এবং 6 প্রকল্পে কাজ করে।
আমি যদি নাবার থেকে পাদচরণে সহজে স্ক্রোল করতে ক্লিক করতে চাইতাম:
<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>
scrollTo(className: string):void {
const elementList = document.querySelectorAll('.' + className);
const element = elementList[0] as HTMLElement;
element.scrollIntoView({ behavior: 'smooth' });
}
আমি পাদলেখ থেকে শিরোনামে ফিরে স্ক্রোল করতে চেয়েছিলাম, তাই আমি একটি পরিষেবা তৈরি করেছি যা এই ফাংশনটি অবস্থিত এবং এটি এটিকে নাবার এবং পাদচরণের উপাদানগুলিতে ইনজেকশনের পরে যেখানে প্রয়োজন সেখানে 'শিরোলেখ' বা 'পাদলেখের' পাশ করে। শুধু মনে রাখবেন প্রকৃতপক্ষে উপাদানগুলির ঘোষণাগুলি দেওয়া ক্লাসের নামগুলি:
<app-footer class="footer"></app-footer>
কৌণিক ক্ষেত্রে এটি করার আরেকটি উপায়:
মার্কআপ:
<textarea #inputMessage></textarea>
যোগ ViewChild()সম্পত্তি:
@ViewChild('inputMessage')
inputMessageRef: ElementRef;
scrollIntoView()ফাংশনটি ব্যবহার করে উপাদানটির অভ্যন্তরের যে কোনও জায়গায় আপনি স্ক্রোল করুন :
this.inputMessageRef.nativeElement.scrollIntoView();
আপনি নীচের কোড ব্লকটি ব্যবহার করে আপনার ভিউটিতে কোনও উপাদান রেফারিতে স্ক্রোল করতে পারেন। লক্ষ্য করুন যে লক্ষ্য (এলিমেন্টেরফ আইডি ) কোনও বৈধ এইচটিএমএল ট্যাগে থাকতে পারে।
ভিউতে (এইচটিএমএল ফাইল)
<div id="target"> </div>
<button (click)="scroll()">Button</button>
উপর .tsফাইল,
scroll() {
document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
আপনি নিম্নলিখিত হিসাবে কৌণিক DOM উপাদান রেফারেন্স ব্যবহার করে তা অর্জন করতে পারেন:
স্ট্যাকব্লিটজ- এর উদাহরণ এখানে
উপাদান টেমপ্লেট:
<div class="other-content">
Other content
<button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
Click to scroll
</button>
</div>
<div id="content" #element>
Some text to scroll
</div>
কৌণিক ক্ষেত্রে আপনি ব্যবহার করতে পারেন ViewChildএবং ElementRef: আপনার এইচটিএমএল উপাদানকে একটি রেফ দিন
<div #myDiv >
এবং আপনার উপাদান ভিতরে:
import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;
আপনি this.myDivRef.nativeElementআপনার উপাদান পেতে পেতে ব্যবহার করতে পারেন
আমার এই কৌশলটি করা দরকার, কারণ আমি কাস্টম এইচটিএমএল উপাদান ব্যবহার করি। আমি এই কাজ না থাকে, তাহলে
targetএ onItemAmounterClickথাকবে না scrollIntoViewপদ্ধতি
.html
<div *ngFor"...">
<my-component #target (click)="clicked(target)"></my-component>
</div>
.ts
onItemAmounterClick(target){
target.__ngContext__[0].scrollIntoView({behavior: 'smooth'});
}
আপনি উপাদানটি যেমন (যেমন document.getElementById(...)) সন্ধানের জন্য jQuery ব্যবহার করে এবং .focus()কলটি ব্যবহার করে যা জিজ্ঞাসা করছেন তার মতো কিছু করেছি ।
আপনি jquery ব্যবহার করে এটি করতে পারেন:
টিএস কোড:
scrollTOElement = (element, offsetParam?, speedParam?) => {
const toElement = $(element);
const focusElement = $(element);
const offset = offsetParam * 1 || 200;
const speed = speedParam * 1 || 500;
$('html, body').animate({
scrollTop: toElement.offset().top + offset
}, speed);
if (focusElement) {
$(focusElement).focus();
}
}
এইচটিএমএল কোড:
<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>
আপনি যে উপাদানগুলিতে স্ক্রোল করতে চান তাতে এটি প্রয়োগ করুন:
<div id="elementTo">some content</div>
এখানে একটি স্ট্যাকব্লিটজ নমুনা।