Effect of scrolling down the page to a defined extent using scroll

0

Hello, I already looked at something related here, but did not clarify my doubt:

How to make this scrolling effect equal to this site? link

And how to set where the scroll will stop, so that each session of the page is centered in the browser without letting pieces of another part appear.

    
asked by anonymous 15.10.2018 / 17:34

1 answer

0

CSS example working, just adjust:

.teste {
  height: 600px;
  overflow: auto;
  width: 600px;
  margin: auto;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  border-bottom: 1px solid #D4D4D4;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

.teste::-webkit-scrollbar-track {
  background-color: transparent;
}

.teste::-webkit-scrollbar {
  width: 10px;
}

.teste::-webkit-scrollbar-thumb {
  background: #dad7d7;
}
<form name="form1" class="teste" class="form-validate" id="feedback_form1">
  <fieldset class="grupo">
    <table class="campo" cellspacing="10">
      <tr>
        <td>
          <strong><label for="Número de Esquecimento">Número de Esquecimento</label></strong>
          <select readonly="true" id="NumEsq" name="NumEsq" style="width:100px">
          </select>
        </td>
        <td>
          <strong><label for="Data/Hora">Data/Hora</label></strong>
          <input type="datetime" id="Data" name="Data" style="width:160px; height: 35px" value="" />
        </td>
      </tr>
    </table>
  </fieldset>
  <button class="btn btn-success btn_contact botao">Registo</button>
  <div id="success_messages" class="hide">sucessso</div>
  <div id="error_message" class="hide">erro</div>
</form>
    
15.10.2018 / 19:12