时间戳

首页 > 解决方案 > 水平 scrollLeft 在 IE 和 Edge 上不起作用？

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

问题描述

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

标签： jqueryhtmlcssinternet-explorermicrosoft-edge

解决方案

  1. 您需要在制作动画时使用$('html,body')而不是$('html')使其在 Edge 中工作。

  2. IE 不支持带有 CSS 变量的嵌套 calc() 。而且您的“不支持自定义属性的浏览器的后备”是错误的。它应该width: 1000vw;在main.sectionOverlay{}和section.section{}width: 200vw;中。

  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");

推荐阅读