কিভাবে একটি উপাদান স্ক্রোল?


180

আমার কাছে একটি চ্যাট উইজেট রয়েছে যা আমি যখনই স্ক্রোল করি ততবার বার্তাগুলির একটি অ্যারে টেনে তুলি। আমি এখন যে সমস্যার মুখোমুখি হচ্ছি তা হ'ল বার্তা লোড হওয়ার পরে স্লাইডারটি শীর্ষে স্থির থাকে। আমি এটি পূর্ববর্তী অ্যারে থেকে শেষ সূচকের উপাদানটিতে ফোকাস করতে চাই। আমি বুঝতে পেরেছি যে আমি সূচক পাস করে গতিশীল রেফগুলি তৈরি করতে পারি, তবে এটি অর্জনের জন্য আমার কী ধরণের স্ক্রোল ফাংশন ব্যবহার করতে হবে তাও জানতে হবে

 handleScrollToElement(event) {
    const tesNode = ReactDOM.findDOMNode(this.refs.test)
    if (some_logic){
      //scroll to testNode      
    }
  }

  render() {

    return (
      <div>
        <div ref="test"></div>
      </div>)
  }

উত্তর:


301

ক্রিয়ামূলক উপাদান, 16.8 + প্রতিক্রিয়া জানান

import React, { useRef } from 'react'

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)   
// General scroll to element function

const ScrollDemo = () => {

   const myRef = useRef(null)
   const executeScroll = () => scrollToRef(myRef)

   return (
      <> 
         <div ref={myRef}>I wanna be seen</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

স্ট্যাকব্লিটগুলিতে একটি পূর্ণ ডেমো জন্য এখানে ক্লিক করুন

16.3 +, শ্রেণীর উপাদান প্রতিক্রিয়া জানান

class ReadyToScroll extends Component {

    constructor(props) {
        super(props)
        this.myRef = React.createRef()  
    }

    render() {
        return <div ref={this.myRef}></div> 
    }  

    scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)   
    // run this method to execute scrolling. 

}

শ্রেণীর উপাদান - রেফার কলব্যাক

class ReadyToScroll extends Component {
    myRef=null
    // Optional

    render() {
        return <div ref={ (ref) => this.myRef=ref }></div>
    } 

    scrollToMyRef = () => window.scrollTo(0, this.myRef.offsetTop)
    // run this method to execute scrolling. 
}

স্ট্রিং রেফ ব্যবহার করবেন না।

স্ট্রিংগুলি ক্ষতিগ্রস্থ পারফরম্যান্সকে রিফ করে, কম্পোজেবল হয় না এবং বেরিয়ে যায় (আগস্ট 2018)।

স্ট্রিং রেফগুলিতে কিছু সমস্যা রয়েছে, উত্তরাধিকার হিসাবে বিবেচিত হয় এবং ভবিষ্যতের রিলিজগুলির মধ্যে এটি অপসারণের সম্ভাবনা রয়েছে। [অফিসিয়াল প্রতিক্রিয়া ডকুমেন্টেশন]

রিসোর্স 1 রিসোর্স 2

Alচ্ছিক: স্মল স্ক্রোল অ্যানিমেশন

/* css */
html {
    scroll-behavior: smooth;
}

একটি সন্তানের রেফ পাস করা

আমরা চাই যে রেফটি কোনও প্রতিক্রিয়ার উপাদানগুলির সাথে নয়, একটি ডোম উপাদানটির সাথে সংযুক্ত করা হোক। সুতরাং এটি কোনও শিশু উপাদানগুলিতে দেওয়ার সময় আমরা প্রপ রেফের নাম রাখতে পারি না।

const MyComponent = () => {
    const myRef = useRef(null)
    return <ChildComp refProp={myRef}></ChildComp>
} 

তারপরে একটি ডোম উপাদানটির সাথে রেফ প্রোপ সংযুক্ত করুন।

const ChildComp = (props) => {
    return <div ref={props.refProp} />
}

5
window.scrollTo(0, offsetTop)বর্তমান ব্রাউজারগুলির মধ্যে আরও ভাল সমর্থন সহ একটি ভাল বিকল্প
মোমো

1
আপনি আপনার উদাহরণটিতে সামঞ্জস্যপূর্ণ তা নিশ্চিত করতে পারেন। আমরা মাইআরফ থেকে শুরু করছি, ডমরাফ দিয়ে যাচ্ছি এবং টেসনোড দিয়ে শেষ করব? এটি বেশ বিভ্রান্তিকর
লুই লেকোক

4
বাস্তবতার পরে স্পষ্ট, তবে এটি উল্লেখ করা গুরুত্বপূর্ণ যে এটি কেবল দেশীয় DOM উপাদানগুলির জন্যই কাজ করে কেবল কোনও প্রতিক্রিয়া উপাদান নয়।
jpunk11

1
@ jpunk11 আমি কেবল আমার উত্তর আপডেট করেছি। আপডেট হওয়া উত্তরটি কীভাবে একটি শিশু শ্রেণীর উপাদানগুলিতে ডম উপাদানটিতে স্ক্রোল করবেন তা ব্যাখ্যা করে।
বেন কার্প

2
@ সিমনফ্রেঞ্জেন আমার আপডেট হওয়া উত্তর - টিএলডিআর - শ্রেণির উপাদান কেসটি একবার দেখুন। যখন স্ক্রোলটিএমআইআরফ বলা হয় তখন এটি আপনার সন্তানের সাথে স্ক্রোল করবে যা আপনি রেফ সংযুক্ত করেছেন। আপনি পদ্ধতিটি কোনও অন্য সন্তানের অংশে পাস করতে পারেন এবং সেখান থেকে এটি ট্রিগার করতে পারেন।
বেন কার্প

54

এটি আমার জন্য কাজ করেছে

this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })

সম্পাদনা: আমি মন্তব্যগুলির উপর ভিত্তি করে এটি প্রসারিত করতে চেয়েছিলাম।

const scrollTo = (ref) => {
  if (ref /* + other conditions */) {
    ref.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

<div ref={scrollTo}>Item</div>

1
এটি কোথায় রাখবেন
su_sundariya

জীবনচক্র পদ্ধতিতে বা নির্মাণকারী
su_sundariya

1
একটি যাদুমন্ত্র মত কাজ করে. উপরের কোনওটিই আমার পক্ষে কাজ করে না, এটি উত্তর গ্রহণ করা উচিত!
শিন

1
আমার জন্য কাজ করেছেন, কেবল লক্ষ্য করুন যে 'স্টার্ট' হ'ল 'ব্লক' প্যারামিটারের ডিফল্ট মান।
লিরন লাভি

এটি আমার পক্ষে কাজ করেছিল যখন @ বেন কার্পের উত্তর না দেয়।
জেসন মাস্টার্স

37

আপনি ইতিমধ্যে নির্ধারিত উপাদানের শীর্ষ অবস্থানটি সন্ধান করুন https://www.w3schools.com/Jsref/prop_element_offsettop.asp তারপর https://www.w3schools.com/Jsref/met_win_scrolto.aspscrollTo পদ্ধতির মাধ্যমে এই অবস্থানে স্ক্রোল করুন

এর মতো কিছু কাজ করা উচিত:

handleScrollToElement(event) {
  const tesNode = ReactDOM.findDOMNode(this.refs.test)
  if (some_logic){
    window.scrollTo(0, tesNode.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref="test"></div>
    </div>)
}

হালনাগাদ:

যেহেতু v16.3 প্রতিক্রিয়াReact.createRef() পছন্দ করা হয়

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

handleScrollToElement(event) {
  if (<some_logic>){
    window.scrollTo(0, this.myRef.current.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref={this.myRef}></div>
    </div>)
}

2
এটি আরও ভাল উত্তর। ব্যবহার ReactDOM.findDomNode()করা আরও ভাল অনুশীলন - যেহেতু উপাদানগুলি পুনরায় সরবরাহ করে, তাই আপনার আইডি দিয়ে একটি ডিভ যেটি আপনি ফাংশনটি কল করার সময় উপস্থিত থাকতে পারে না
গুড আইডিয়া

4
অফিসিয়াল ডকুমেন্টেশন অনুসারে আপনার ব্যবহার এড়াতে চেষ্টা করা উচিত findDOMNode। বেশিরভাগ ক্ষেত্রে, আপনি ডোম নোডের সাথে একটি রেফ সংযুক্ত করতে পারেন এবং এগুলি ব্যবহার এড়াতে পারেন findDOMNode
ফ্যাসিও কাউচ

1
লক্ষ্য করুন স্ট্রিং ম্যাপিং দ্বারা this.refs ব্যবহার নিন্দা করা হয়েছে, দেখুন: stackoverflow.com/questions/43873511/...
Himmet Avsar

1
দ্রষ্টব্য: আমার this.myRef.current.scrollIntoView()পরিবর্তে আমাকে ব্যবহার করতে হয়েছিল window.scrollTo(0, this.myRef)
Babbz77

14

FindDOMNode ব্যবহার করে অবশেষে হ্রাস করা হবে।

পছন্দসই পদ্ধতি হ'ল কলব্যাক রেফ ব্যবহার করা।

github eslint


3
লিঙ্কযুক্ত উপাদানের প্রাসঙ্গিক অংশটি অন্তর্ভুক্ত করুন যাতে আপনার উত্তরটি অকেজো হয়ে যায় না সে ক্ষেত্রে।
টোটেমেডলি

12

আপনি এখন ব্যবহার করতে পারেন useRef প্রতিক্রিয়া হুক এপিআই থেকে

https://reactjs.org/docs/hooks-reference.html#useref

ঘোষণা

let myRef = useRef()

উপাদান

<div ref={myRef}>My Component</div>

ব্যবহার

window.scrollTo({ behavior: 'smooth', top: myRef.current.offsetTop })

আমি আপনার কোড ব্যবহার করার চেষ্টা করছি। আমি দেখতে পাচ্ছি, console.logএটির মাধ্যমে এটি আপনার window.scrollToবিবৃতিটি কার্যকর করছে (আমার ক্ষেত্রে সামঞ্জস্য করা হয়েছে) তবে এটি স্ক্রোল করে না। এটি কি এই সম্পর্কিত যে আমি একটি প্রতিক্রিয়া বুটস্ট্র্যাপ মডেল ব্যবহার করছি এর সাথে সম্পর্কিত হতে পারে?
robertwerner_sf

9

আপনি scrollIntoViewকোনও নির্দিষ্ট উপাদানটিতে স্ক্রোল করার জন্যও পদ্ধতিটি ব্যবহার করতে পারেন ।

handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
 if (some_logic){
  tesNode.scrollIntoView();
  }
 }

 render() {
  return (
   <div>
     <div ref="test"></div>
   </div>)
}

9

আমি পার্টিতে দেরিতে হতে পারি তবে আমি আমার প্রকল্পটির সঠিক পদ্ধতিতে গতিশীল রেফগুলি বাস্তবায়নের চেষ্টা করছিলাম এবং যতক্ষণ না জানা পর্যন্ত আমার কাছে পাওয়া সমস্ত উত্তর আমার পছন্দ অনুযায়ী সন্তুষ্ট নয়, তাই আমি এমন একটি সমাধান নিয়ে এসেছি যা আমার মনে হয় সহজ এবং রেফ তৈরি করতে দেশীয় এবং প্রস্তাবিত প্রতিক্রিয়ার উপায় ব্যবহার করে।

কখনও কখনও আপনি দেখতে পান যেভাবে ডকুমেন্টেশনটি রচনা করা হয়েছে তা ধরে নিয়েছে যে আপনার জ্ঞাত পরিমাণে জ্ঞাত পরিমাণ রয়েছে এবং বেশিরভাগ ক্ষেত্রে এই সংখ্যাটি অজানা তাই আপনাকে এই ক্ষেত্রে সমস্যাটি সমাধান করার জন্য একটি উপায়ের প্রয়োজন, অজানা সংখ্যক দর্শনের গতিশীল রেফ তৈরি করুন need ক্লাসে দেখাতে

সুতরাং সবচেয়ে সহজ সমাধান যা আমি ভাবতে পারি এবং নির্দ্বিধায় কাজ করেছিলাম তা হ'ল নিম্নরূপ

class YourClass extends component {

state={
 foo:"bar",
 dynamicViews:[],
 myData:[] //get some data from the web
}

inputRef = React.createRef()

componentDidMount(){
  this.createViews()
}


createViews = ()=>{
const trs=[]
for (let i = 1; i < this.state.myData.lenght; i++) {

let ref =`myrefRow ${i}`

this[ref]= React.createRef()

  const row = (
  <tr ref={this[ref]}>
<td>
  `myRow ${i}`
</td>
</tr>
)
trs.push(row)

}
this.setState({dynamicViews:trs})
}

clickHandler = ()=>{

//const scrollToView = this.inputRef.current.value
//That to select the value of the inputbox bt for demostrate the //example

value=`myrefRow ${30}`

  this[value].current.scrollIntoView({ behavior: "smooth", block: "start" });
}


render(){

return(
<div style={{display:"flex", flexDirection:"column"}}>
<Button onClick={this.clickHandler}> Search</Button>
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>


)

}

}

export default YourClass

এই ভাবে আপনি যে সারিটি সন্ধান করছেন তাতে স্ক্রোলটি যাবে ..

চিয়ার্স এবং আশা করি এটি অন্যকে সহায়তা করে


8

জুলাই 2019 - ডেডিকেটেড হুক / ফাংশন

একটি উত্সর্গীকৃত হুক / ফাংশন প্রয়োগের বিশদটি গোপন করতে পারে এবং আপনার উপাদানগুলিকে একটি সহজ এপিআই সরবরাহ করে।

প্রতিক্রিয়া 16.8 + কার্যকরী উপাদান

const useScroll = () => {
  const htmlElRef = useRef(null)
  const executeScroll = () => window.scrollTo(0, htmlElRef.current.offsetTop)

  return [executeScroll, htmlElRef]
}

এটি কোনও কার্যকরী উপাদান ব্যবহার করুন।

const ScrollDemo = () => {
    const [executeScroll, htmlElRef] = useScroll()
    useEffect(executeScroll, []) // Runs after component mounts

    return <div ref={htmlElRef}>Show me</div> 
}

পূর্ণ ডেমো

16.3 + শ্রেণীর অংশের প্রতিক্রিয়া জানান

const utilizeScroll = () => {
  const htmlElRef = React.createRef()
  const executeScroll = () => window.scrollTo(0, htmlElRef.current.offsetTop)

  return {executeScroll, htmlElRef}
}

এটি যে কোনও শ্রেণীর উপাদান ব্যবহার করুন।

class ScrollDemo extends Component {
  constructor(){
    this.elScroll = utilizeScroll()
  }

  componentDidMount(){
    this.elScroll.executeScroll()
  }

  render(){
    return <div ref={this.elScroll.htmlElRef}>Show me</div> 
  }
} 

পূর্ণ ডেমো


7

আপনি এইভাবে চেষ্টা করতে পারেন:

 handleScrollToElement = e => {
    const elementTop = this.gate.offsetTop;
    window.scrollTo(0, elementTop);
 };

 render(){
  return(
      <h2 ref={elem => (this.gate = elem)}>Payment gate</h2>
 )}

ভাল সমাধান, যদিও আপনি সম্ভবত এই.gate.offsetTop এর চেয়ে e.offsetTop চান এবং তারপরে এই.gate ফাংশনে পাস করুন।
কিংঅফ হাইপোক্রিটস

5

আপনি যেমন কিছু ব্যবহার করতে পারেন componentDidUpdate

componentDidUpdate() {
  var elem = testNode //your ref to the element say testNode in your case; 
  elem.scrollTop = elem.scrollHeight;
};

3
আমি মনে করি প্রতিক্রিয়াতে এলডি আইডি ব্যবহার করা পছন্দ নয়। এটি ভার্চুয়াল ডোম ধারণাটি ভেঙে দেয়
আইমশক্ষাম

লাইফ সাইকেল পদ্ধতিটি হ'ল কোডটি চালানোর জন্য WHEN / WHERE পর্যন্ত যাওয়ার উপায়। তবে সম্ভবত আপনি এই
উত্তরটিতে

3

আমার একটি সাধারণ দৃশ্যাবলী ছিল, যখন ব্যবহারকারীরা আমার উপাদান ইউআই নভবারের মেনু আইটেমটিতে ক্লিক করেন আমি সেগুলিকে পৃষ্ঠার বিভাগে স্ক্রোল করতে চাই। আমি সমস্ত উপাদানগুলির মধ্যে রেফ ব্যবহার করতে এবং থ্রেড করতে পারতাম তবে থ্রেডিং প্রপস ঘৃণা করি একাধিক উপাদান প্রপস কারণ এটি কোডকে ভঙ্গুর করে তোলে।

আমি আমার প্রতিক্রিয়া উপাদানটিতে কেবল ভ্যানিলা জেএস ব্যবহার করেছি, দেখা যাচ্ছে এটি ঠিকঠাক কাজ করে। আমি যে উপাদানটিতে স্ক্রোল করতে চেয়েছিলাম এবং তার শিরোনামের উপাদানটিতে আমি সবেমাত্র এটি করেছি তাতে একটি আইডি রেখেছি।

const scroll = () => {
  const section = document.querySelector( '#contact-us' );
  section.scrollIntoView( { behavior: 'smooth', block: 'start' } );
};

2

এই পদক্ষেপগুলি অনুসরণ করুন:

1) ইনস্টল করুন:

npm install react-scroll-to --save

2) প্যাকেজ আমদানি করুন:

import { ScrollTo } from "react-scroll-to";

3) ব্যবহার:

class doc extends Component {
  render() {
    return(
      <ScrollTo>
        {({ scroll }) => (
          <a onClick={() => scroll({ x: 20, y: 500, , smooth: true })}>Scroll to Bottom</a>
        )}
      </ScrollTo>
    )
  }
}

2

এখানে ক্লাস কম্পোনেন্ট কোড স্নিপেট আপনি এই সমস্যা সমাধানের জন্য ব্যবহার করতে পারেন:

এই পদ্ধতিটি রেফ ব্যবহার করেছে এবং লক্ষ্য রেফের সাথে সহজে স্ক্রোল করে

import React, { Component } from 'react'

export default class Untitled extends Component {
  constructor(props) {
    super(props)
    this.howItWorks = React.createRef() 
  }

  scrollTohowItWorks = () =>  window.scroll({
    top: this.howItWorks.current.offsetTop,
    left: 0,
    behavior: 'smooth'
  });

  render() {
    return (
      <div>
       <button onClick={() => this.scrollTohowItWorks()}>How it works</button>
       <hr/>
       <div className="content" ref={this.howItWorks}>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt placeat magnam accusantium aliquid tenetur aspernatur nobis molestias quam. Magnam libero expedita aspernatur commodi quam provident obcaecati ratione asperiores, exercitationem voluptatum!
       </div>
      </div>
    )
  }
}

1

আমার জন্য কী কাজ করেছে:

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef(); // Create a ref    
    }

    // Scroll to ref function
    scrollToMyRef = () => {
        window.scrollTo({
            top:this.myRef.offsetTop, 
            // behavior: "smooth" // optional
        });
    };

    // On component mount, scroll to ref
    componentDidMount() {
        this.scrollToMyRef();
    }

    // Render method. Note, that `div` element got `ref`.
    render() {
        return (
            <div ref={this.myRef}>My component</div>
        )
    }
}

1

কেবল এক মাথা পর্যন্ত, আমি এই সমাধানগুলিকে ম্যাটেরিয়াল ইউআই উপাদানগুলিতে কাজ করতে পারি না। দেখে মনে হচ্ছে তাদের কাছে নেইcurrent সম্পত্তি নেই।

আমি কেবলমাত্র divআমার উপাদানগুলির মধ্যে একটি খালি যুক্ত করেছি এবং তাতে রেফ প্রোপ সেট করেছি।


0
 <div onScrollCapture={() => this._onScrollEvent()}></div>

 _onScrollEvent = (e)=>{
     const top = e.nativeEvent.target.scrollTop;
     console.log(top); 
}

0

উপরের সমাধানগুলির সাথে যার ভাগ্য ভাল ছিল না বা কেবল একটি সাধারণ ড্রপ-ইন সমাধান চায় তার এই পড়া অন্য কারও কাছে, এই প্যাকেজটি আমার পক্ষে কাজ করেছে: https://www.npmjs.com/package/react-anchor-link- মসৃণ-স্ক্রোল । শুভ হ্যাকিং!


0

আমি এটি অনক্লিক ফাংশনের অভ্যন্তরে একটি ডিভের দিকে সহজে স্ক্রোল করতে ব্যবহার করেছি যেখানে এর আইডি "স্টেপ 2 ডিভ" রয়েছে।

let offset = 100;
window.scrollTo({
    behavior: "smooth",
    top:
    document.getElementById("step2Div").getBoundingClientRect().top -
    document.body.getBoundingClientRect().top -
    offset
});

0

সর্বোত্তম উপায়টি ব্যবহার করা element.scrollIntoView({ behavior: 'smooth' })। এটি একটি দুর্দান্ত অ্যানিমেশন সহ উপাদানটিকে স্ক্রোল করে।

আপনি এটিকে প্রতিক্রিয়াটির সাথে একত্রিত করলে useRef(), এটি নিম্নলিখিত পদ্ধতিতে সম্পন্ন করা যেতে পারে।

import React, { useRef } from 'react'

const Article = () => {
  const titleRef = useRef()

  function handleBackClick() {
      titleRef.current.scrollIntoView({ behavior: 'smooth' })
  }

  return (
      <article>
            <h1 ref={titleRef}>
                A React article for Latin readers
            </h1>

            // Rest of the article's content...

            <button onClick={handleBackClick}>
                Back to the top
            </button>
        </article>
    )
}

আপনি যখন কোনও প্রতিক্রিয়া উপাদানটিতে স্ক্রোল করতে চান, তখন আপনাকে রেফারেন্সকারী উপাদানটিতে রেফ ফরওয়ার্ড করতে হবে। এই নিবন্ধটি সমস্যার গভীরে ডুব দেবে

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.