Прокрутка плавно на 100 пикселей по горизонтали - PullRequest
Новая
       31

Прокрутка плавно на 100 пикселей по горизонтали

0 голосов
/ 20 февраля 2019

Heyjo,

проблема : я ищу код javascript или jQuery уже неделю, чтобы на моем веб-сайте работала встроенная кнопка прокрутки.В тот момент, когда у меня не получается, кнопка должна работать несколько раз: его задача не так прокручивать до выделенного элемента, она должна прокручиваться влево, например, на 100 пикселей.Кроме того, прокрутка должна происходить плавно (другими словами, анимированно) в соответствующем разделе.

что я пытался : до сих пор я пытался выполнить эту задачу с помощью $('#idofsection').animate({scrollLeft: 100}, 800), но, очевидно, это не сработало.Проблема была в том, что никто не мог использовать его несколько раз, он просто прокручивался до позиции в моем разделе.Впоследствии я использовал javascript scrollBy(100, 0) или scrollLeft += 100px, но, к сожалению, не получил плавной прокрутки.

Я надеюсь, что кто-то может мне помочь, потому что я потратил так много времени на эту проблему, не найдя решения.Большое спасибо, Свен

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Вы можете использовать scrollBy (100, 0) так же, как вы пытались, и добавить это свойство css в область просмотра, в которую вы хотите прокрутить: 

scroll-behavior: smooth;


.window{
  width: 200px;
  height: 100px;
  border: 1px red solid;
  overflow: hidden;
  scroll-behavior: smooth;
}
.container{
  width: 1000px;
  height: 200px;
}
.buttons{
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<div id="window" class="window">
  <div class="container">
    fjsdlf jslkd flsakj flksad jflkjsa dlfj slakd jflskad flksdaj lfk sadlkfj asldk fslkad fjlkasd flksa jdlf jsadlkfj slkda jflksadj flksa jdlkfj sadlk jflksadj flksjadflksadj flksdaj flksdaj flksdaflksjdflk sjdalkfj skdal fjlksadj flksa fklsjadfklj sadklfj salkdjf lksadj flksjad lfkj sadlkf jslakdjf lksdaj flkasj flkjsa dlfskal flsa jdas lkfjskad fj
  </div>
</div>
<div class="buttons">
  <button onclick="document.getElementById('window').scrollBy(-100,0)">
  <-
  </button>
  <button onclick="document.getElementById('window').scrollBy(100,0)">
  ->
  </button>
</div>

Решение также здесь: JSFiddle

0 голосов
/ 20 февраля 2019

Поэтому используйте свойства анимации +=, чтобы настроить его из текущей позиции. 

$("#next").click(function(){
  $('#foo').stop().animate({scrollLeft: "+=100"}, 800);
  return false;
}); 
div {
  width: 200px;
  overflow: auto;
  padding: 1em;
  border: 1px solid black;
}

div p {
  width: 1000px;
  border: 2px dashed #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">
  <p>TEST</p>
</div>

<button id="next">Next</button>
...