Question

我有一个可以水平滚动的元素（使用overflow-x：自动）

我想做的是当被一点点触摸时，它会自动滚动以显示整个按钮。就像在iPhone邮件应用程序中刷卡一样。

目前我有这样的代码。

import React, { PropTypes } from 'react';
import styles from './SavedCondition.css';

export default class SavedCondition extends React.Component {
  startPos = 0;

  handleTouchStart = () => {
    this.startPos = this.content.getBoundingClientRect().x;
  };

  handleTouchEnd = () => {
    const endPos = this.content.getBoundingClientRect().x;
    const toLeft = endPos > this.startPos;

    if (toLeft) {
      this.wrapper.scrollTo(0, 0);
    } else {
      this.wrapper.scrollTo(this.hiddenElements.clientWidth, 0);
    }
  };

  render() {
    return (
      <li
        ref={elem => (this.wrapper = elem)}
        className={styles.wrapper}
      >
        <div
          className={styles.content}
          ref={elem => (this.content = elem)}
          onTouchStart={() => this.handleTouchStart()}
          onTouchEnd={() => this.handleTouchEnd()}
        >
          <button
            onTouchTap={() => this.props.onClick(this.props.id)}
            className={styles.main}
          >
            Main
          </button>
          <button
            className={styles.hiddenElements}
            ref={elem => (this.hiddenElements = elem)}
          >
            hidden
          </button>
        </div>
      </li>
    );
  }
}

具有类名“包装”的

div可在x轴上滚动（带有oveflow-x：滚动）问题是handleTouchEnd方法中的scrollTo方法在移动设备浏览器中不起作用。它适用于PC chrome。

我已经搜索过，但是找不到在移动设备浏览器中滚动元素的方法。我该怎么办？

如何使用智能手机浏览器触发元素内部滚动

0 个答案: