Javascript的offsetWidth不適用於Safari

我在頁面中間有一個div，在頁面滾動頁眉菜單下方變得粘滯。問題是使用offsetWidth不會將任何寬度添加到Safari中的相應div，因此粘性div的寬度不適應屏幕大小。Javascript的offsetWidth不適用於Safari

我做了我在網上搜索，看到了一些建議和黑客（例如：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>

來源

2017-09-15 Amma

我已經改變了

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

到

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

現在，它工作在Safari和其他瀏覽器。

來源

2017-09-15 17:38:24 Amma

Javascript的offsetWidth不適用於Safari

回答

相關問題