Example of React operating real DOM to achieve dynamic bottom suction

Dynamic bottoming: At the beginning, fixed is on the page, and when the page scrolls to a certain distance from the bottom, the fixed part is fixed.

This requires calculating the scroll distance of the page. It is very easy to implement if you use Jquery or native js implementation. However, since using react does not advocate operating DOM, but if you use virtual DOM, you cannot achieve this effect. Therefore, you still need to introduce js to directly obtain DOM for operation.

react is rendered after componentDidMount, so you can directly use the js native method to obtain the DOM element and then operate it.

componentDidMount() {
 ()
}
// Calculate heightchangeFixed(){
 //getDOMNode
 const layoutNode = ('.page-layout')[0];
 const orderPriceNode = ('.test-price')[0];
 ('scroll', function (e) {
  const windowInnerHeight = ;
  const layoutNodeHeight = ;
  //Scrolling beyond the field of view  let scrollTop = ||  || ;
  const distanceBottom = layoutNodeHeight - scrollTop - windowInnerHeight;
  //At 120  if(distanceBottom <= 120){
   ('fixed');
  }else{
   ('fixed');
  }
 })
}

This enables the bottoming to be absorbed when the distance from the bottom 120

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.