如何修改一个小脚本以在没有 jquery 的情况下运行答案

【问题标题】：how to modify a small script to run without jquery如何修改一个小脚本以在没有 jquery 的情况下运行
【发布时间】：2015-08-03 16:20:33
【问题描述】：

以下脚本（启用 2 个并行滚动条）有几行但需要 jquery 库，我怎样才能使它成为独立的 javascript，在此先感谢...

http://jsfiddle.net/TBnqw/1/

HTML：

<div class="wrapper1">
    <div class="div1">
    </div>
</div>
<div class="wrapper2">
    <div class="div2">
    aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
    </div>
</div>

JAVASCRIPT：

$(function(){
    $(".wrapper1").scroll(function(){
        $(".wrapper2")
            .scrollLeft($(".wrapper1").scrollLeft());
    });
    $(".wrapper2").scroll(function(){
        $(".wrapper1")
            .scrollLeft($(".wrapper2").scrollLeft());
    });
});

CSS：

.wrapper1, .wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
.wrapper1{height: 20px; }
.wrapper2{height: 200px; }
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; background-color: #88FF88;
overflow: auto;}

【问题讨论】：

你想要你在 jquery 中所做的 javascript 代码吗？

标签： javascript jquery css scrollbar

【解决方案1】：

是这样的：

var scrollBarTop = document.querySelector(".wrapper1");
var scrollBarBottom = document.querySelector(".wrapper2");

scrollBarTop.addEventListener("scroll", function(){
    scrollBarBottom.scrollLeft = scrollBarTop.scrollLeft;    
});

scrollBarBottom.addEventListener("scroll", function(){
    scrollBarTop.scrollLeft = scrollBarBottom.scrollLeft;    
});

【讨论】：

【解决方案2】：

这是 Angular 2 / Angular 的做法。即没有 Jquery

奇怪的是，您不能只设置变量，而是必须直接对文档进行设置

https://plnkr.co/edit/eYz2c8?p=preview

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.Emulated
 })
export class AppComponent {

onWindowsScrollTop() {
  document.querySelector('.table-wrapper-bottom').scrollLeft = document.querySelector('.table-wrapper-top').scrollLeft;
}
onWindowsScrollBottom() {
  document.querySelector('.table-wrapper-top').scrollLeft = document.querySelector('.table-wrapper-bottom').scrollLeft;
}

reportTopScrollLeft() {
  alert('the scrollLeft for top = ' + document.querySelector('.table-wrapper-top').scrollLeft)
}

reportBottomScrollLeft() {
  alert('the scrollLeft for top = ' + document.querySelector('.table-wrapper-bottom').scrollLeft)
}

 }

【讨论】：