如何通過將$（window）.width（）添加到jQuery中的：before選擇器來擺脫水平滾動

Question

這是我的jQuery-我將解釋我想做什么：

我已經將100vw添加到我的section：before選擇器中，但是問題是出現了水平滾動 （因為100vw將滾動寬度添加到100vw）。

我認為解決水平滾動問題的方法是將$（window）.width（）應用於我的section：before選擇器，這樣我的100vw將不會計算滾動條。

這是我弄弄應該做的方式（但是我還不知道如何實現）：

1. 在jQuery中選擇：before元素

2. 將：before寬度樣式設置為$（window）.width（）

3. 水平滾動不見了。

有什么想法怎么做？

CSS：

section {
  width:500px;
  height:100vh;
  margin:0 auto;
    background: #222226;


}

section:before {
    content: 'this is my before';
    position: absolute;
    width: 100vw;
    z-index:-1;
    background: #ccc;
    top:0;
    bottom:0;
    right:0;
    left: calc(-50vw + 50%);
}

jQuery（我知道這是錯誤的，因為：before不是DOM模型的一部分，但他的想法是）：

    $(document).ready(function() {

        var window = $(document).width();

        $('section:before').css("width", window);

        });

Answer 1

不太確定為什么要執行自己的操作，但是...將overflow-x屬性設置為hidden；

overflow-x: hidden;

在：before元素中將邊距和填充設置為0也可能是值得的。