Блог

Главная - Вопросы по программированию - Моя чистая горизонтальная прокрутка js не активирует scroll-snap

Моя чистая горизонтальная прокрутка js не активирует scroll-snap

#javascript #html #css

#javascript #HTML #css

Вопрос:

Обновлено для наглядности:

У меня есть функция javascript, которая преобразует обычную прокрутку колесика мыши в горизонтальную прокрутку. Это само по себе, похоже, работает. Я хочу, чтобы эта функция активировала прокрутку привязки css. Когда я добавляю CSS, функция не работает. Чтобы было ясно, shift scroll это работает. Для работы мне нужна обычная прокрутка.

Я использую следующий код.

 //a function to convert normal mousewheel scroll to horizontal scroll

(function() {
  function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.getElementById('flexall-container').scrollLeft -= (delta * 40); // Multiplied by 40
    e.preventDefault();
  }
})();  
 /* some body style */

body {
  overflow-y:hidden;
  overflow-x:scroll;
}

/*style the parent div*/

#flex-container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  pointer-events: all;
  scroll-snap-type: x mandatory;
}

/* a class to create each page */

.flexall-container-child {
  scroll-snap-align: start;
  /* parent properties */
  display: flex;
  flex-direction: column;
  align-items: baseline;
  /* child properties */
  height: 100vh;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 100%;
  white-space: nowrap;
}  
 <!--parent div-->

<div id="flex-container">
  
  <!-- page 1-->
  
  <section id="page01-container" class="flexall-container-child">
    
    <!-- some arbitrary content-->
    
    <h1 id="title-text">
      Title
    </h1>
    <h3 id="title-subheader">
      Subtitle
    </h3>
    
  </section>
  
  <!-- page 2-->
  
  <section id="page02-container" class="flexall-container-child">
    
    <!--some more arbitrary content-->
    
    <h1 id="title-text-2">Page 2 Title</h1>
  
  </section>
  
</div>

Любая помощь будет оценена. Спасибо.

Ответ №1:

В вашем коде была (по крайней мере) одна опечатка: вы назвали класс с префиксом точки в своем HTML:

class=".flexall-container-child" .

Я удалил части, которые не имели отношения к сути вопроса, и это работает отлично:

 body {
  overflow-y: hidden;
  overflow-x: scroll;
}

#flex-container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.flexall-container-child {
  scroll-snap-align: start;
  height: 100vh;
  flex: 0 0 100%;
}  
 <div id="flex-container">
  <section id="page01-container" class="flexall-container-child">
    <h1 class="page-title">Page 1 Title</h1>
  </section>
  <section id="page02-container" class="flexall-container-child">
    <h1 class="page-title">Page 2 Title</h1>
  </section>
</div>

Комментарии:

1. «Прокрутка сдвига» работает отлично, но это не устраняет первоначальную проблему, с которой я столкнулся, когда прокрутка pure js, по-видимому, не работала. По крайней мере, это, похоже, не работает для меня. Я прошу прощения, если мой вопрос был недостаточно ясен, редактируя его сейчас.