js实现左右点击支持卡片左右平滑效果（React）

效果图

原理：

当dom元素左侧被隐藏时，可进行往右点击；
当dom元素右侧被隐藏时，可进行往左点击；

储备知识：判断一个dom节点是否在可视化区域内

let dom = document.getElementById('box_lunbo');
let innerWidth = window.innerWidth; //当前可视化宽度
let domReact = dom && dom.getBoundingClientRect();

{
    "x": 0,
    "y": 412.125,
    "width": 1610,
    "height": 302,
    "top": 412.125,
    "right": 1610,
    "bottom": 714.125,
    "left": 0
}
//rectObject.top：元素上边到视窗上边的距离;
//rectObject.right：元素右边到视窗左边的距离;
//rectObject.bottom：元素下边到视窗上边的距离;
//rectObject.left：元素左边到视窗左边的距离;
//rectObject.width：是元素自身的宽
//rectObject.height是元素自身的高

完整代码

/*
 * @Author: YanHSama
 * @Date: 2022-08-18 21:38:47
 * @LastEditors: YanHSama
 * @LastEditTime: 2022-08-18 23:50:56
 * @FilePath: \umi_newreact\src\pages\components\LunBo\index.tsx
 * @Description: 
 */

import { useState } from 'react';
import './index.less';
const list = [
  {
    name: '一、helli1这是我最爱的歌曲哦'
  },
  {
    name: '二、helli1这是我最爱的歌曲哦'
  },
  {
    name: '三、helli1这是我最爱的歌曲哦'
  },
  {
    name: '四、helli1这是我最爱的歌曲哦'
  },
  {
    name: '五、helli1这是我最爱的歌曲哦'
  },
  {
    name: '六、helli1这是我最爱的歌曲哦'
  }
]
export default function Lunbo(props) {

  const [num, setNum] = useState(0);
  const [distance, setDistance] = useState(0);

  const handleTransform = (type: string) => {
    let dom = document.getElementById('box_lunbo');
    let innerWidth = window.innerWidth;
    let domReact = dom && dom.getBoundingClientRect();
    console.log('dom', domReact, innerWidth);

    let _distance = distance;
    // 判断是否支持滑动
    if (domReact?.width < innerWidth) {
      return;
    } else {
      // 判断是否支持向右滑动
      if (domReact?.x < 0) {
        if (type === 'right') {
          console.log('向右滑动');
          _distance = distance + 150;
          console.log('_distance', _distance);


          dom.style.transform = `translateX(${_distance}px`;
          setNum(num + 1)

          setDistance(_distance);

        }
      }

      // 判断是否支持向左滑动
      if (domReact?.right - innerWidth > 0) {
        if (type === 'left') {
          console.log('向左滑动');
          console.log('_distance', _distance);

          _distance = distance - 150;
          dom.style.transform = `translateX(${_distance}px`;
          setNum(num - 1);

          setDistance(_distance);


        }

      }
    }


  }

  return (
    <div className='Lubo_Box'>
      <div className='arrow arrow_left'
        onClick={() => handleTransform('left')}
      >向左</div>
      <div className='arrow arrow_right'
        onClick={() => handleTransform('right')}
      >向右</div>
      <ul className='Lunbo_content' id='box_lunbo'>

        {
          list?.map((item: any, index: number) => {
            return (
              <li key={index} className="lunbo_item">
                <div>{item?.name}</div>
              </li>
            )
          })
        }
      </ul>
    </div>
  )
}

.Lubo_Box {
  width: 100vw;
  // overflow: hidden;

  .Lunbo_content {
    width: max-content;

    .lunbo_item {
      width: 300px;
      margin-right: 20px;
      border: 1px solid #888;
      height: 300px;
    }
  }
}

.arrow {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: aqua;
  line-height: 100px;
  text-align: center;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

.arrow_left {
  margin-top: 150px;
  left: 0;
}

.arrow_right {
  margin-top: 150px;
  right: 0;

}