Question

我在页面中间有一个div，它在页面滚动页面菜单下面变得很粘。问题是使用offsetWidth不会在Safari中为相应的div添加任何宽度，因此粘性div的宽度不适应屏幕大小。

我在网上进行了搜索并看到了一些建议和黑客（例如：this link），但是在我的案例中没有一个真正起作用。

由于所有浏览器都支持offsetWidth，我不明白为什么Safari有任何问题。代码如下：

JS：

const scheduleControls = document.querySelector('.schedule-controls');
const wrap = document.querySelector('.schedule-controls-wrapper');

function fixControls(){
        const scrollTop = document.body.scrollTop;
        const wrapOffsetTop = wrap.offsetTop;
         if((document.querySelector('.section-live').offsetTop - 240) <= scrollTop) {
          scheduleControls.classList.remove('fixed');
          scheduleControls.style = '';
        } else  if (scrollTop + document.querySelector('.js_site-header').offsetHeight >= wrapOffsetTop) {
          scheduleControls.classList.add('fixed');
          scheduleControls.style = `width:${wrap.offsetWidth}px;`;
        } else {
          scheduleControls.classList.remove('fixed');
          scheduleControls.style = '';
        }
      }

CSS：

.schedule-controls {
  display: flex;
  height: 70px;
  transition: all 0.125s ease;

  &.fixed {
    position: fixed;
    top: 60px;
    height: 80px;
    border-top: 10px solid $white;
    background: $white;

    @media (min-width: $bp-m){
      top: 162px;
    }
}

HTML：

            <div class="schedule-loading-wrapper js_schedule-loading-wrapper hidden">
                <div class="schedule-controls-wrapper" id="scheduleControlsWrapper">
                    <div class="schedule-controls">
    </div>
</div>

Answer 1

我已经改变了

scheduleControls.style = `width:${wrap.offsetWidth}px;`;

到

scheduleControls.style.width = wrap.offsetWidth + "px";

现在它适用于Safari和所有其他浏览器。

Javascript的offsetWidth不适用于Safari

1 个答案: