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

Posted 2023-05-08

【中文标题】水平 scrollLeft 在 IE 和 Edge 上不起作用？

【英文标题】：Horizontal scrollLeft not working on IE and Edge?

【发布时间】：2020-03-01 20:18:14

【问题描述】：

我设计了一个网站，它由 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', `$vhpx`);
  document.documentElement.style.setProperty('--vw', `$vwpx`);

  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】：

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

带有 CSS 变量的嵌套 calc() 是 not supported by IE。而且您的“不支持自定义属性的浏览器的后备”是错误的。它应该是 ma​​in.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");

【讨论】：

感谢您的回答。在 Edge 中工作，但在 IE 中仍不会因这些更改而让步。

@CoopDaddio，你的 IE 版本是多少？请检查并运行 IE 中的代码：w3schools.com/code/tryit.asp?filename=G9P99INT1UKU。它可以在我的 IE 11.116.18362.0 中运行良好