如何将JS获得的值替换为CSS中的特定位置？_JavaScript

CSS和JS都在使用外部文件进行读取。

我想做的事：

.typ-wrap::-webkit-scrollbar-track-piece:end {
margin-right: ?px;
background: transparent;
}
.typ-wrap::-webkit-scrollbar-track-piece:start {
margin-left: ?px;
background: transparent;
}

我想在此包含减去302px得到的值? 。
在公式中， ? = (Window size) - 302px / 2 ? = (Window size) - 302px / 2 （ ?是相同的值）

我尝试过（最新版）（没用）：

$(function() {
   var typscrollWidth = $('.typ::after').width();   // get 302px
   var windowWidth = $(window).innerWidth();
   var typthumbCenter = windowWidth - typscrollWidth / 2;   //the above formula

   $('.typ-wrap::-webkit-scrollbar-track-piece:end').css('margin-right', 
     typthumbCenter + 'px');
   $('.typ-wrap::-webkit-scrollbar-track-piece:start').css('margin-left', 
     typthumbCenter + 'px');
});

我找到了一个似乎可以自定义的例子，所以这是jQuery ..
但我想用JavaScript编写。
（对不起安迪，我仍然不明白如何用我的例子中的变量来做.. :(）

为什么不用CSS？ 因为我试图做的效果不能用CSS的自动设置（例如margin: auto; ）来完成。

我不太了解JS :(
在这种情况下，我该怎么写？
有人，请帮帮我！

加

每次加载时，它都会像这样移动。 一旦它改变了窗口宽度，它就是正确的。
你知道为什么吗？

码

相应的代码位于中间。
完整页面时，代码段看起来是正确的。 （因为现在是手动调整，仅适用于窗口宽度为1280px的环境）

 html {font-size: 62.5%;} body {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; box-sizing: border-box; list-style-type: none;} /* reset */ .typ { position: relative; width: 100%; } .typ::after { content: ''; position: absolute; z-index: -1; width: 30.2rem; /* Place of 302px */ height: 1.6rem; bottom: 0; left: 0; right: 0; margin: auto; background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228080150.png"); } .typ-wrap { position: relative; box-sizing: border-box; width: 100%; margin-bottom: 8.3rem; overflow-x: scroll; overflow-y: hidden; writing-mode: bt-lr; /* IE */ -webkit-appearance: none; } .typ-wrap::-webkit-scrollbar { display: block; width: 33.2rem; } .typ-wrap::-webkit-scrollbar-track { -webkit-appearance: none; background: transparent; } /* from here */ .typ-wrap::-webkit-scrollbar-track-piece:end { margin-right: 489px; /* It's centered in Fullpage (In my environment) */ background: transparent; } .typ-wrap::-webkit-scrollbar-track-piece:start { margin-left: 489px; /* It's centered in Fullpage (In my environment lol) */ background: transparent; } /* to here */ .typ-wrap::-webkit-scrollbar-thumb { width: 1.5rem; height: 1.3rem; background: #fff; border: 1px solid #000; } .typ-wrap ul { width: 100%; height: 31.9rem; white-space: nowrap; } .typ-wrap li { display: inline-block; } .typ-wrap li:first-child { margin-left: 3rem; } .typ-wrap li:last-child { margin-right: 3rem; } .typ-wrap li + li { margin-left: 3rem; }

 <div class="typ"> <div class="typ-wrap"> <ul> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075715.png" alt="あ=a" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075712.png" alt="い=b" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075710.png" alt="う=c" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075706.png" alt="え=d" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075704.png" alt="お=e" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075810.png" alt="か=f" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075807.png" alt="き=g" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075805.png" alt="く=h" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075802.png" alt="け=i" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075759.png" alt="こ=j" /></a> </li> </ul> </div> </div>

没有完整的HTML ，很难像我想的那样提供帮助。 基本思想是使用并从我们的JavaScript侦听器更新变量。

这是一个将元素.typ-wrap的宽度更新为视口大小的一半的示例。

 // Check on load checkWindowWidth(); // Check on resize $(window).on('resize', handleResize); function handleResize() { checkWindowWidth(); } function checkWindowWidth() { $(":root")[0].style.setProperty('--window-width', $(window).width()); $('.typ-wrap').attr('data-window-width', $(window).width()); }

 html, body { margin: 0; } :root { --window-width: 0; } .typ-wrap { display: inline-block; width: calc(var(--window-width) / 2 * 1px); height: 50px; background: green; position: relative; } .typ-wrap::after { content: attr(data-window-width) 'px'; position: absolute; bottom: -1.5em; left: 50%; transform: translateX(-50%); display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="typ-wrap" data-window-width=""></div>

更新（解决方案！）

查看自定义滚动条的，我没有看到任何提及:end和:start作为后缀::-webkit-scrollbar-track-piece ，这让我想到， 为什么不设置两个边距相反呢？ 这就是我做的。

我添加的CSS ：

.typ-wrap::-webkit-scrollbar-track-piece {
  margin-left: calc(((var(--window-width) * 1px) - 302px) / 2);
  margin-right: calc(((var(--window-width) * 1px) - 302px) / 2);
  …
}

在我们的JavaScript我们在页面加载和resize事件上设置窗口宽度。

$(":root")[0].style.setProperty('--window-width', $(window).innerWidth());

演示（仅限Chrome）：

 // Check on load checkWindowWidth(); // Check on resize $(window).on('resize', handleResize); function handleResize() { checkWindowWidth(); } function checkWindowWidth() { $(":root")[0].style.setProperty('--window-width', $(window).innerWidth()); }

 :root { --window-width: 0; } html { font-size: 62.5%; } body { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; box-sizing: border-box; list-style-type: none; } /* reset */ .typ { position: relative; width: 100%; } .typ::after { content: ''; position: absolute; z-index: -1; width: 30.2rem; height: 1.6rem; bottom: 0; left: 0; right: 0; margin: auto; background: url("https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228080150.png"); } .typ-wrap { position: relative; box-sizing: border-box; width: 100%; margin-bottom: 8.3rem; overflow-x: scroll; overflow-y: hidden; writing-mode: bt-lr; -webkit-appearance: none; } .typ-wrap::-webkit-scrollbar { display: block; width: 33.2rem; } .typ-wrap::-webkit-scrollbar-track { -webkit-appearance: none; background: transparent; } .typ-wrap::-webkit-scrollbar-track-piece { margin-left: calc(((var(--window-width) * 1px) - 302px) / 2); margin-right: calc(((var(--window-width) * 1px) - 302px) / 2); background: transparent; } .typ-wrap::-webkit-scrollbar-thumb { width: 1.5rem; height: 1.3rem; background: #fff; border: 1px solid #000; } .typ-wrap ul { width: 100%; height: 31.9rem; white-space: nowrap; } .typ-wrap li { display: inline-block; } .typ-wrap li:first-child { margin-left: 3rem; } .typ-wrap li:last-child { margin-right: 3rem; } .typ-wrap li+li { margin-left: 3rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="typ"> <div class="typ-wrap"> <ul> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075715.png" alt="あ=a" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075712.png" alt="い=b" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075710.png" alt="う=c" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075706.png" alt="え=d" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075704.png" alt="お=e" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075810.png" alt="か=f" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075807.png" alt="き=g" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075805.png" alt="く=h" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075802.png" alt="け=i" /></a> </li> <li> <a href=""><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190228/20190228075759.png" alt="こ=j" /></a> </li> </ul> </div>

更新II（一些解释）

那么，这条线究竟是什么呢？

margin-left: calc(((var(--window-width) * 1px) - 302px) / 2);

这是CSS ，但看起来非常嵌套和复杂。 不过，这并不算太糟糕。 让我们分解吧。

calc()

将其视为网络的智能计算器。 它内置于CSS本身，可以为我们做一些聪明的事情，比如添加41em + 50px 。 大多数人无法计算出他们的头脑，但对于calc()来说没有问题。 就像真正的计算器一样，您可以一次执行多个操作。

唯一需要注意的是操作符两侧必须存在空格（+， - ，*，/）。

好

calc(40% + 5px);

坏

calc(40%+5px);

接下来我们得到了这部分表达式：

((var(--window-width) * 1px)

我们走出去吧。 以下是我们通过JavaScript生成的数字，无论是在首次加载还是调整大小后都会发生。

var(--window-width)

但问题是，这个数字最后没有单位。 它可能是511 ，但不是511px 。 这导致我们进入该长方程的下一部分，其中我们乘以无单位宽度* 1px 。 还记得当我说calc()可以采用完全不同的单位并将它们加入单个值时吗？ 好吧，乘以1px ，我强迫宽度为px宽度。

现在我们已经得到了px格式的窗口宽度，我们从它中减去302px ，这个常数来自你的等式。 最后，我们从所有这些中得到结果并将其除以2，占滚动条本身宽度的一半。 我们现在有一个动态居中的滚动条，准备采取行动。

好吧，深吸一口气。 为了回答你的上一个问题，我相信你有时看到的小变化归结为在给定屏幕宽度下浏览器中可能出现的亚像素渲染异常。 我有时会看到这种转变，但不是所有的时间。 它可能取决于何时触发resize事件以及最终计算的精确程度。 我会用这一点来解决这种动态元素定位中发生的挑战，有时会每秒重新启动。 如果没有更多的调查和工作，我不确定我能否解决这个问题。

我希望通过这整个问题你学到了一些东西。 也许你可以在路上帮助别人。 像这样的问题使得参与这个网站变得有趣。 很高兴见到你，POP！

如何将JS获得的值替换为CSS中的特定位置？

问题描述

我想做的事：

我尝试过（最新版）（没用）：

加

码

1楼

更新（解决方案！）

更新II（一些解释）