Question

我是新来的人，目前我正在尝试将div的scrollTop属性设置为所需的数字。不幸的是，它对我不起作用。请参见下面的代码：

.results tr[visible='false'],
.no-result{
  display:none;
}

.results tr[visible='true']{
  display:table-row;
}

.counter{
  padding:8px;
  color:#ccc;
}

和CSS：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>TDGEventos</title>

    <link rel="icon" href="" title="icon">

    <!--CSS -->
    <link rel="stylesheet" href="/public/css/bootstrap.css">
    <link rel="stylesheet" href="/public/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/public/js/quicksearch.js"></script>

    <!--carrega o navbar e o footer-->
    <% include layout-nav-footer %>

</head>

<body>

<!--Botao de pesquisa-->
<div class="container">
    <div class="row col-lg-12">


        <div class="form-group pull-right">
            <h2>Eventos</h2>
            <input type="text" class="search form-control d-flex" placeholder="Pesquisar eventos">
            <span class="container counter pull-right"></span>
        </div>

        <!--Tabela de resultados-->

        <table class="col-md-12 table table-hover table-bordered results">
            <thead>
            <tr>
                <th>Nome</th>
                <th>Data de Inicio</th>
                <th>Categoria</th>
                <th>Premiação</th>
                <th class="text-center" colspan="2">Editar</th>
            </tr>
            <tr class="warning no-result">
                <td colspan="5"><i class="fa fa-warning"></i>Sem resultados!</td>
            </tr>
        </thead>
        <tbody>
            <% for (var i = 0; i < eventos.length; i++) { %>
            <tr>
                <td><%= eventos[i].nome_evento %></td>
                <td><%= eventos[i].data_formatada %></td>
                <td><%= eventos[i].categoria %></td>
                <td><%= eventos[i].premiacao %></td>
                <td hidden><%= eventos[i].idUser = usuario%></td>
                <form action="/entrar-evento" method="POST" >
                    <input style="display:none"name="id" value="<%=eventos[i].id%>">
                    <td><button id="cadastrar" class="btn btn-dark btn-change6" type="submit">entrar</button></a></td>
                </form>
            </tr>
            <% } %>
        </tbody>
    </table>
</div>
</div>

</body>
</html>

Here是相应代码的代码。附言我不想使用Jquery。谢谢您的帮助。

Answer 1

这是一个CSS /溢出问题，而不是JS / React问题。问题是testDiv不够高，无法发生任何事情。在其上设置height: 30px，您会看到区别：https://codepen.io/anon/pen/ZmBydZ

Answer 2

您必须确保testDiv的内容高于容器本身，并将y轴上的溢出设置为滚动。

示例

class Testdiv extends React.Component {
  divRef = React.createRef();

  componentDidMount() {
    setTimeout(() => {
      this.divRef.current.scrollTop = 1000;
    }, 1000);
  }

  render() {
    return (
      <div style={{ height: 200, overflowY: "scroll" }} ref={this.divRef}>
        Hello World
        <div style={{ height: 300 }} />
        Hello World!
      </div>
    );
  }
}

ReactDOM.render(<Testdiv />, document.getElementById("root"));

<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

React：设置div的scrollTop属性不起作用

2 个答案: