水平滚动可移动光标而不是移动屏幕

Question

下面是我正在为我的Web应用程序运行的代码，以在站点内进行水平滚动。我在部分站点中将滚动条作为组件，但是我面临的问题是滚动条水平移动，但屏幕本身却没有左右移动？我可以添加一个CSS命令吗？

def list_generator(list_size):
  v = [int(input('Digit number\n')) for i in range(0,list_size)]
  return v

def list_sum():
  return sum(v)

list_size = int(input('Enter list size\n'))
v = list_generator(list_size)
print(list_generator(list_size))
print(list_sum())

#other code
def creat_list(list_size):
  v = [int(input('Digit number\n')) for i in range(0,list_size)]
  return v

def sum_list(v):
  return sum(v)

list_size = int(input('Digit list size\n'))
print(creat_list(list_size))
print(sum_list(v))

这是我的css文件

HorizontalScroll.js

import React, { Component } from 'react';
import ScrollMenu from 'react-horizontal-scrolling-menu';

import './HorizontalScroll.css';

// List Of My Items
const list = [

  { name: 'item1'},
  { name: 'item2 '},
  { name: 'item3 '},
  { name: 'item4 '},
  { name: 'item5' }

];

// One Item component
// selected prop will be passed
const MenuItem = ({text, selected}) => {
  return <div className={`menu-item ${selected ? 'active' : '' }`}>{text}</div>
};

//All items component
// Important add a key
export const Menu = (list, selected) => list.map(el => {
  const {name} = el;

  return <MenuItem text={name} key={name} selected={selected} />
});

const Arrow = ({ text, className }) => {
  return (
    <div className={className}>{text}</div>
  );
};

const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });

const selected = 'item1';

class HorizontalScroll extends Component {
  constructor(props) {
    super(props);
    //call it again if count changes
    this.menuItems = Menu(list, selected);
  }

  state = {
    selected
  };

  onSelect = key => {
    this.setState({ selected: key });
  }

  render() {
    const { selected } = this.state;
    //Create menu from items
    const menu = this.menuItems;

    return(
      <div className="scroll-width">
      <div className="HorizontalScroll">
       <ScrollMenu data={menu} arrowLeft={ArrowLeft} arrowRight={ArrowRight} selected={selected} onSelect={this.onSelect} />
       </div>
       </div>
    );
  };
};

export default HorizontalScroll;