js переопределить прокрутку вниз при использовании ручной прокрутки - PullRequest
Новая
       9

js переопределить прокрутку вниз при использовании ручной прокрутки

1 голос
/ 04 апреля 2020

Я использую код ниже, чтобы прокрутить различные div после определенного периода времени. Тем не менее, страница продолжает скользить обратно в нижнюю часть div при ручной прокрутке вверх. Есть ли способ использовать этот код, но переопределить автоматический c слайд назад, где я могу вручную прокрутить до любого div, не переходя обратно на дно, прежде чем я закончу sh чтение того, что находится в этом div. 

<style id="compiled-css" type="text/css">
      #scroller {
      overflow-y:scroll;
      padding:0;
      margin:0
      border:1px solid #eee;
      width:100%;
      height:500px;
  }

  </style>

<body>
    <div id="scroller">    
    <div style="width:50%;height:50%;background:#ff0000"></div>    
    <div style="width:50%;height:50%;background:#00ff00"></div>    
    <div style="width:50%;height:100%;background:#0000ff"></div>    
    <!--div style="width:50%;height:50%;background:#ff00ff"></div>
    <div style="width:50%;height:50%;background:#ffff00"></div-->
</div>

Status: <span id="status">1</span>
<script type="text/javascript">

  var scrollingUp = 0;
  window.setInterval(scrollit, 3000);
  function scrollit() {
      if(scrollingUp == 0) {
          $('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 500 }, 'slow');
          }
      }
</script>

1 Ответ

1 голос
/ 04 апреля 2020

Мне понадобилось время, чтобы понять это.

По сути, вы запускаете его на классе и устанавливаете функцию с тайм-аутом, чтобы после анимации прокрутки функция удаляла этот класс из div. Таким образом, когда он хочет снова бежать, ему не на что бежать. И прокрутка останавливается.

Надеюсь, это поможет. 

  var scrollingUp = 0;
  window.setInterval(scrollit, 3000);
  function scrollit() {
      if(scrollingUp == 0) {
          $('.scroller').delay(2000).animate({ scrollTop: $(".scroller").scrollTop() + 500 }, 'slow');
          }
      };    
setInterval(function(){ $("#scroller" ).removeClass("scroller"); }, 3000);     
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style id="compiled-css" type="text/css">
      #scroller {
      overflow-y:scroll;
      padding:0;
      margin:0
      border:1px solid #eee;
      width:100%;
      height:500px;
  }

  </style>

<body>
    <div id="scroller" class="scroller">    
    <div style="width:50%;height:50%;background:#ff0000"></div>    
    <div style="width:50%;height:50%;background:#00ff00"></div>    
    <div style="width:50%;height:100%;background:#0000ff"></div>    
    <!--div style="width:50%;height:50%;background:#ff00ff"></div>
    <div style="width:50%;height:50%;background:#ffff00"></div-->
</div>

Status: <span id="status">1</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...