为何部分jQuery与JavaScript方法表现异常？求原理解析

问题描述 #

• CSS断点失效，需通过事件检测屏幕宽度重新适配轮播箭头，但遇到两个核心问题：
  • $(window).width() 返回的宽度存在偏移，导致箭头显示异常（出现覆盖图片的情况）
  • $(window).on('resize', function(){}) 和 window.onresize = reportWindowSize 仅在页面初始加载时触发一次，窗口尺寸变化时完全无响应

重现步骤 #

使用Swiper组件创建包含3张图片的居中轮播布局（1张前置、1张左置、1张右置），轮播箭头出现覆盖图片的异常。

相关代码 #

HTML代码

<div class="carousel-box">
  <swiper-container class="carouselCws">
    <swiper-slide class="whole-slide">
       <div class="slider-image">IMG</div>
       <div class="text-container">h3 P</div>
       <div class="button">Learn More!</div>
    </swiper-slide>
  </swiper-container>
 <div class="arrows-to-slider">
    <img class="carouselCws-button-prev buttonS" src="imageUrl"></img>
    <img class="carouselCws-button-next buttonS" src="imageUrl"></img>
    </div>
</div>

CSS代码

.carouselCws {
  height: 100%;
}

.arrow-to-slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
    
.buttonS {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.carouselCws-button-prev { left: 31%; }

.carouselCws-button-next { left: 69%; }

解决方法 #

1. 修复resize事件响应逻辑：

$(function() {
  $(window).resize(fixArrowMargin).trigger('resize');
});

2. 获取准确的浏览器视口宽度：使用 window.innerWidth 替代 $(window).width()

原理分析 #

原问题产生原因 #

1. $(window).width() 的偏移问题：
   • jQuery的$(window).width()返回的是文档显示区域的宽度，不包含浏览器垂直滚动条的宽度；而当页面内容超出视口出现滚动条时，window.innerWidth才是视口的实际可用宽度（包含滚动条）。两者数值差异会导致基于宽度计算的箭头位置出现偏移。
2. resize事件不响应的问题：
   • 原写法大概率存在事件绑定时机错误（比如绑定代码在DOM未完全加载时执行），或者被其他代码覆盖了resize事件绑定。同时，未手动触发初始resize，导致页面首次加载时箭头位置未被修正，直接处于异常状态。

解决方法工作原理 #

1. resize事件处理代码：
   • $(function() { ... }) 确保代码在DOM完全加载完成后执行，避免因DOM未就绪导致事件绑定失败。
   • $(window).resize(fixArrowMargin) 将箭头位置修正函数fixArrowMargin绑定到resize事件，每次窗口尺寸变化时自动触发位置修正。
   • .trigger('resize') 手动触发一次resize事件，保证页面初始化阶段就执行一次位置修正，避免初始状态下箭头显示异常。
2. window.innerWidth 的优势：
   • 直接获取浏览器视口的实际宽度（包含滚动条），能精准反映当前屏幕的可用显示空间，基于这个值计算箭头位置，不会因滚动条的存在产生偏移。

内容的提问来源于stack exchange，提问作者Leonardo Di Silvestre