Question

我设计了一个网站，该网站包含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>

Answer 1

制作动画时，需要使用$('html,body')代替$('html')使其在Edge中工作。
带有CSS变量的嵌套calc（）为not supported by IE。并且您的“不支持自定义属性的浏览器的回退”是错误的。在 main.sectionOverlay {} 中应为width: 1000vw;，在 section.section {} 中应为width: 200vw;。
更改脚本的第一部分以使其在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");

水平scrollLeft在IE和Edge上不起作用？

1 个答案: