Question

我有一个ReactJS项目，因为各种原因我被告知不要使用jQuery，因此我尝试将以下jQuery转换为JavaScript - 滚动页面时，它可以平滑地改变背景颜色：

$( window ).ready(function() {

    var wHeight = $(window).height();

    $('.slide')
        .height(wHeight)
        .scrollie({
            scrollOffset : -50,
            scrollingInView : function(elem) {

                var bgColor = elem.data('background');

                $('body').css('background-color', bgColor);

            }
        });

    });

CSS：

* { box-sizing: border-box }

body {
    font-family: 'Coming Soon', cursive;
    transition: background 1s ease;
    background: #3498db;
}

p {
    color: #ecf0f1;
    font-size: 2em;
    text-align: center;     
}

a {
    text-decoration: none;
}

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script>

<div class="main-wrapper">

    <div class="slide slide-one" data-background="#3498db">
        <p>Title</p>
        <center>Go To <a href="#green" style="color:green">Green</a>.</center>  
    </div>

    <div class="slide slide-two" data-background="#27ae60">
        <a name="green">
            <p>Green area</p>
            <center>Go To <a href="#red" style="color:red">Red</a>.</center>
        </a>
    </div>

    <div class="slide slide-three" data-background="#e74c3c">
        <a name="red">
            <p>Red area</p>
            <center>Page over. Hope that was helpful :)</center>
        </a>
    </div>

但是如何转换为JavaScript以适应ReactJS项目？

提前感谢您，一定会接受/ upvote回答

Answer 1

始终可以从JQuery更改为JavaScript。因为JQuery建立在JavaScript之上。大多数时候（就像你的情况一样）它甚至没有那么多工作。

我没有更改您的CSS或HTML。所以这只是一些新的JavaScript。但是，您应该将此脚本放在网站的末尾。

(function() { // create an own scope and run when everything is loaded

  // collect all the slides in this array and apply the correct height
  var slides = document.getElementsByClassName('slide')
  for (slide of slides) slide.style.height = window.innerHeight + 'px'

  // use the native scroll event
  document.addEventListener("scroll", function() {
    // how much have we scrolled already
    var currentOffset = document.documentElement.scrollTop || document.body.scrollTop

    // now check for all slides if they are in view (only one will be)
    for (slide of slides) {
       // 200 is how much before the top the color should change
       var top = slide.getBoundingClientRect().top + currentOffset - 200
       var bottom = top + slide.offsetHeight

      // check if the current slide is in view
      if (currentOffset >= top && currentOffset <= bottom) {
        // set the new color, the smooth transition comes from the CSS tag
        // CSS: transition: background 1s ease;
        document.body.style.background = slide.dataset.background
        break
      }
    }

  })

}())

另外你可能想听resize事件，因为截至目前你调整窗口大小时会看起来有点偏（这取代了上面代码的5行）

  function setSize() {
    for (slide of slides) slide.style.height = window.innerHeight + 'px'
  }
  window.addEventListener("resize", setSize)
  setSize()

解决方案

＆＃13;

(function() {
  
  var slides = document.getElementsByClassName('slide')
  function setSize() {
    for (slide of slides) slide.style.height = window.innerHeight + 'px'
  }
  window.addEventListener("resize", setSize)
  setSize()

  document.addEventListener("scroll", function() {
    var currentOffset = document.documentElement.scrollTop || document.body.scrollTop
    
    for (slide of slides) {
       // 100 is how much before the top the color should change
       var top = slide.getBoundingClientRect().top + currentOffset - 100
	   var bottom = top + slide.offsetHeight

      if (currentOffset >= top && currentOffset <= bottom) {
        document.body.style.background = slide.dataset.background
        break
      }
    }
    
  })
  
}())

＆＃13;

body {
    font-family: 'Coming Soon', cursive;
    transition: background 1s ease;
    background: #3498db;
}

p {
    color: #ecf0f1;
    font-size: 2em;
    text-align: center;     
}

a { text-decoration: none;
}

＆＃13;

<div class="main-wrapper">

    <div class="slide slide-one" data-background="#3498db">
        <p>Title</p>
        <center>Go To <a href="#green" style="color:green">Green</a>.</center>  
    </div>

    <div class="slide slide-two" data-background="#27ae60">
        <a name="green">
            <p>Green area</p>
            <center>Go To <a href="#red" style="color:red">Red</a>.</center>
        </a>
    </div>

    <div class="slide slide-three" data-background="#e74c3c">
        <a name="red">
            <p>Red area</p>
            <center>Page over. Hope that was helpful :)</center>
        </a>
    </div>

＆＃13;

Answer 2

plugin您指的是自述文件中的an example链接，其中包含newer version的链接，该链接使用了不this other plugin em>使用jQuery，实际上做了你想做的事，我想。它被称为in-view，它对我来说非常好（功能和代码）。

它的用法与您目前所做的非常相似。从上面链接的较新示例：

var $target = $('.wrapper'); inView('.section').on('enter', function(el){ var color = $(el).attr('data-background-color'); $target.css('background-color', color ); });

我确实意识到我在某种程度上没有回答这个问题，因为这不是一个jQuery-to-vanilla-JS指南，但我确实认为有人已经为你做了这件事有帮助。

Answer 3

应该给你一些想法。

var wHeight = window.innerHeight;

要在javascript中选择元素：在浏览器上打开检查元素，控制台选项卡并键入：

document.get

它可以提示你得到什么

获取元素的样式：

 var elem1 = document.getElementById("elemId");
 var style = window.getComputedStyle(elem1, null);

设置属性：

 document.body.style.setProperty(height`, wHeight  +"px");

以下是您可以进行的一些修改，正如人们评论的那样，我并不是想教你如何做，而是想给你一些启动：

 // $( window ).ready(function() { //remove this

var wHeight = $(window).height(); // USe this instead: var wHeight = window.innerHeight;

$('.slide') //instead of selecting with jquery "$('.slide')"  select with:  Javascript var x = document.getElementsByClassName("example") ;
  .height(wHeight) // Here you are chaining methods, read this article https://schier.co/blog/2013/11/14/method-chaining-in-javascript.html
  .scrollie({
    scrollOffset : -50,
    scrollingInView : function(elem) {

      var bgColor = elem.data('background'); //var bgColor = window.getComputedStyle(elem, null);

      $('body').css('background-color', bgColor); //document.body.style.background = bgColor;

    }
  });

 // }); //remove this

For .... in

var t = document.getElementsByClassName('slide')
console.log(typeof t) //object

for (var prop in t) {
 console.log('t.' + prop, '=', t[prop]);
 // output is index.html:33 t.0 = <div class="slide slide-one" data-      background="#3498db">…</div>
 // output is index.html:33 t.1 = <div class="slide slide-two" data- background="#27ae60">…</div>
 // output is index.html:33 t.2 = <div class="slide slide-three" data-background="#e74c3c">…</div><a name="red">…</a></div>
// output is index.html:33 t.length = 3
// output is index.html:33 t.item = function item() { [native code] }
// output is index.html:33 t.namedItem = function namedItem() { [native code] }

}

如何将以下jQuery转换为Jact for ReactJS？

3 个答案:

解决方案