首页 > 解决方案 > 如何在 React JS 中制作水平滚动条,例如 Google 的那种?

问题描述

在 react js 中问这个问题的最简单方法是什么?如何使用此code.see图像预期输出制作滚动条?*[ https://i.stack.imgur.com/nex4t.png][1]

import React from 'react';
import ScrollContainer from "react-indiana-drag-scroll";
import './App.css';
const list = new Array(15).fill(1).map((_, index) => index + 1);
const Arrow = ({ text, className }) => {
  return <div className={className}>{text}</div>;
};
class Nav extends React.Component{
render(){
  return(
      <div className="Head">
          <div className="Filters">
Filters
          </div>
          <div className="categories">
            <ScrollContainer className="pn-ProductNav">
              <div className="pn-ProductNav_Contents ">

              {list.map(el => (
              <a href="googl.com" className="pn-ProductNav_Link" >
                <div className="inner" key={el}>
                Chairs
                </div>
                </a>
              ))}
          </div>
          </ScrollContainer>
      </div>
      </div>
  );
  }

}
export default Nav;


标签: reactjssliderhorizontal-scrolling

解决方案


推荐阅读