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

时间：2019-03-04 01:44:03

标签： javascript jquery css css3

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（?是相同的值）

like this

我尝试过的内容（最新版本）（无效）：

$(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 :(
在这种情况下，我应该怎么写？
有人，请帮助我！

添加

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

like this

代码

相应的代码在中间。
该代码段为整页时看起来正确。 （因为现在是手动调整，仅适用于窗口宽度为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>

1 个答案:

答案 0 :(得分：1)

如果没有完整的HTML，那么很难提供我想要的帮助。基本思想是使用CSS Variables并从我们的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>

更新（一种解决方案！）

在查看自定义滚动条的MDN page时，我没有看到: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中，我们设置页面加载和调整大小事件的窗口宽度。

$(":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。多数人无法一compute而就，但这对calc()来说没问题。就像真正的计算器一样，您可以一次执行多个操作。

唯一的警告是，运算符的两边必须有一个空格（+，-，*，/）。

好 

calc(40% + 5px);

坏 

calc(40%+5px);

接下来，我们有表达式的这一部分：

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

让我们由内而外。以下是我们在首次加载和调整大小后通过JavaScript生成的数字。

var(--window-width)

问题是，数字末尾没有单位。它可能是511，但不是511px。这将导致我们转到该长方程的下一部分，在此我们乘以无单位宽度* 1px。还记得我说过calc()可以采用完全不同的单位并将它们合并为一个值吗？好吧，通过乘以1px，我迫使该宽度为px的宽度。

现在，我们有了px格式的窗口宽度，我们从中减去302px，即方程式中的常数。最后，我们从所有 中提取结果并将其除以2，占滚动条本身宽度的一半。现在，我们有了一个动态居中的滚动条，可以立即采取行动。

好的，喘口气。为了回答您的最后一个问题，我相信您有时会看到的微小变化归因于在给定屏幕宽度下浏览器中可能发生的亚像素渲染异常。我有时会看到这种转变，但并非总是如此。这可能取决于调整大小事件的触发时间以及最终计算的精确度。我将用这种方法来解决难以解决的动态元素定位中遇到的挑战，这种挑战有时每秒都会触发。我不确定我是否可以在无需更多调查和工作的情况下解决最后一部分。

我希望通过整个问题可以学到一些东西。也许您可以帮助某人。诸如此类的问题使参与此站点变得很有趣。 POP，很高兴认识您！

jsFiddle

相关问题
最新问题