Горизонтальный scrollLeft не работает на IE и Edge? - PullRequest
Новая
       24

Горизонтальный scrollLeft не работает на IE и Edge?

0 голосов
/ 05 ноября 2019

Я разработал веб-сайт, который состоит из 5 страниц шириной 100%, выровненных рядом друг с другом по горизонтали. Я написал несколько сценариев jQuery, которые позволяют мне переходить с одной «страницы» на другую. Он отлично работает в Mozilla, Chrome, Safari и т. Д., Но не в IE или Edge. Я хотел бы знать, какие части моего кода не будут работать правильно в IE и Edge и как я могу решить эту проблему. 

$(document).ready(function() {

  let vh = window.innerHeight * 0.01;
  let vw = window.innerWidth * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
  document.documentElement.style.setProperty('--vw', `${vw}px`);

  var maxscroll = ($('html')[0].scrollWidth / 5)
  $('html').scrollLeft(0);
  $('html').scrollTop(0);

  $('.move').click(function() {
    $('.section').animate({
      scrollTop: 0
    }, 800);
    $('.section').css('overflow', 'hidden');
  })

  $("#move1").click(function() {
    $('html').stop().animate({
      scrollLeft: (maxscroll * 0)
    }, 800, function() {
      $('.section:nth-child(1)').css('overflow', 'auto');
    });
  })

  $("#move2").click(function() {
    $('html').stop().animate({
      scrollLeft: (maxscroll * 1)
    }, 800, function() {
      $('.section:nth-child(2)').css('overflow', 'auto');
    });
  })

  $("#move3").click(function() {
    $('html').stop().animate({
      scrollLeft: (maxscroll * 2)
    }, 800, function() {
      $('.section:nth-child(3)').css('overflow', 'auto');
    });
  })

  $("#move4").click(function() {
    $('html').stop().animate({
      scrollLeft: (maxscroll * 3)
    }, 800, function() {
      $('.section:nth-child(4)').css('overflow', 'auto');
    });
  })

  $("#move5").click(function() {
    $('.arrow-right').hide();
    $('html').stop().animate({
      scrollLeft: (maxscroll * 4)
    }, 800, function() {
      $('.section:nth-child(5)').css('overflow', 'auto');
    });
  })
})
body {
  background-color: black;
  margin: 0;
  padding: 0;
  height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

nav.movers {
  display: block;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 31;
}

li.move {
  margin: 20px;
  color: white;
  cursor: pointer;
  display: inline-block;
}

li.move:hover {
  font-weight: bold;
}

ul.nav {
  top: 0;
  float: right;
  margin-right: 80px;
  list-style-type: none;
}

main.sectionOverlay {
  position: relative;
  width: 100vw;
  width: calc(var(--vw, 1vw) * 500);
  display: inline-block;
}

section.section {
  position: relative;
  width: 100vw;
  width: calc(var(--vw, 1vw) * 100);
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: inline-block;
  overflow: auto;
  background-color: black;
}

#s1 {
  background-color: black;
}

#s2 {
  background-color: green;
}

#s3 {
  background-color: red;
}

#s4 {
  background-color: blue;
}

#s5 {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="movers">
  <ul class="nav">
    <li class="move" id="move1">Black (1)</li>
    <li class="move" id="move2">Green (2)</li>
    <li class="move" id="move3">Red (3)</li>
    <li class="move" id="move4">Blue (4)</li>
    <li class="move" id="move5">Yellow (5)</li>
  </ul>
</nav>
<main class="sectionOverlay">
  <section class="section" id="s1">
  </section><section class="section" id="s2">
  </section><section class="section" id="s3">
  </section><section class="section" id="s4">
  </section><section class="section" id="s5">
  </section>
</main>

1 Ответ

1 голос
/ 06 ноября 2019
  1. Вам нужно использовать $('html,body') вместо $('html') при анимации, чтобы он работал в Edge.

  2. Вложенный calc () с переменными CSS не поддерживается IE . И ваш «запасной вариант для браузеров, которые не поддерживают пользовательские свойства» неверен. Это должно быть width: 1000vw; в main.sectionOverlay {} и width: 200vw; в section.section {} .

  3. Изменить первоечасть скрипта, чтобы он работал в IE: 

     var vh = window.innerHeight * 0.01;
     var vw = window.innerWidth * 0.01;
     document.documentElement.style.setProperty('--vh', vh.toString() + "px");
     document.documentElement.style.setProperty('--vw', vw.toString() + "px");
...