표의 맨 위와 맨 아래에 있는 수평 스크롤 막대

표의 맨 위와 맨 아래에 있는 수평 스크롤 막대

아주 큰 것을 가지고 있습니다.table저는 막대를 .그래서 저는 가로 스크롤 막대를 테이블의 아래에 놓기로 결정했습니다.하지만 저는 이 스크롤바가 테이블 위에도 있었으면 좋겠습니다.

템플릿에 있는 내용은 다음과 같습니다.

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">...</table>
</div>

이것은 HTML과 CSS에서만 가능합니까?

두하려면 " "dummy" "dummy" "dummy"를 놓습니다.div수평 스크롤이 있는 요소 위에서 스크롤 막대를 사용할 수 있을 정도로 높습니다.그런 다음 더미 요소와 실제 요소에 대해 "스크롤" 이벤트 핸들러를 연결하여 스크롤 막대를 이동할 때 다른 요소를 동기화합니다.더미 요소는 실제 요소 위의 두 번째 수평 스크롤 막대처럼 보입니다.

실제 예제는 이 바이올린을 참조하십시오.

코드는 다음과 같습니다.

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

CSS:

.wrapper1, .wrapper2 {
  width: 300px;
  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;
}

JS:

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

CSS만 사용하는 솔루션

이를 달성하기 위한 한 가지 방법이 있습니다. 여기서 아무도 언급하지 않았습니다.

상위 컨테이너를 180도 회전시키고 하위 컨테이너를 다시 180도 회전시키면 스크롤 막대가 맨 위에 표시됩니다.

.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
} 
.child {
  transform: rotateX(180deg);
}

자세한 내용은 w3c 저장소의 문제를 참조하십시오.

플러그인을 사용해 보십시오.

jQuery:

$(document).ready(function(){
  $('#double-scroll').doubleScroll();
});

CSS:

#double-scroll{
  width: 400px;
}

HTML:

<div id="double-scroll">
  <table id="very-wide-element">
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

JQuery 미포함 (2017)

JQuery가 필요하지 않을 수 있으므로 @StanleyH 답변을 기반으로 한 작동 중인 Vanilla JS 버전은 다음과 같습니다.

var wrapper1 = document.getElementById('wrapper1');
var wrapper2 = document.getElementById('wrapper2');
wrapper1.onscroll = function() {
  wrapper2.scrollLeft = wrapper1.scrollLeft;
};
wrapper2.onscroll = function() {
  wrapper1.scrollLeft = wrapper2.scrollLeft;
};

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

<div id="wrapper1">
    <div id="div1">
    </div>
</div>
<div id="wrapper2">
    <div id="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>

Stanley H의 답변은 훌륭했지만, 한 가지 유감스러운 버그가 있었습니다. 스크롤바의 음영 부분을 클릭하면 클릭한 선택 항목으로 더 이상 이동하지 않는다는 것입니다.대신 스크롤바의 위치가 매우 작고 다소 성가신 증가가 나타납니다.

테스트됨: Firefox 4가지 버전(100% 영향), Chrome 4가지 버전(50% 영향)

여기 제 jsfiddle입니다.한 번에 하나의 onScroll() 이벤트만 트리거할 수 있는 on/off(true/false) 변수를 설정하면 이 문제를 해결할 수 있습니다.

var scrolling = false;
$(".wrapper1").scroll(function(){
    if(scrolling) {
      scrolling = false;
      return true;
    }
    scrolling = true;
    $(".wrapper2")
        .scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
    if(scrolling) {
      scrolling = false;
      return true;
    }
      scrolling = true;
    $(".wrapper1")
        .scrollLeft($(".wrapper2").scrollLeft());
});

승인된 답변에 대한 문제 동작:

실제로 원하는 동작:

그렇다면, 왜 이런 일이 일어날까요?코드를 실행하면 wrapper1이 wrapper2의 scrollLeft를 호출하고 wrapper2가 wrapper1의 scrollLeft를 호출하는 것을 볼 수 있습니다. 그리고 이것을 무한 반복하기 때문에 무한 루프 문제가 발생합니다.또는 사용자의 계속적인 스크롤은 wrapperx의 스크롤 호출과 충돌하고 이벤트 충돌이 발생하며 스크롤 막대에서 점프하지 않습니다.

이것이 다른 누군가에게 도움이 되기를 바랍니다!

우선, 훌륭한 대답, @Stanley H.동적 너비를 가진 이중 스크롤 용기를 만드는 방법을 알고 싶은 경우:

CSS

.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
.wrapper1 { height: 20px; }
.div1 { height: 20px; }
.div2 { overflow: none; }

제이에스

$(function () {
    $('.wrapper1').on('scroll', function (e) {
        $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft());
    }); 
    $('.wrapper2').on('scroll', function (e) {
        $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
    });
});
$(window).on('load', function (e) {
    $('.div1').width($('table').width());
    $('.div2').width($('table').width());
});

html

<div class="wrapper1">
    <div class="div1"></div>
</div>
<div class="wrapper2">
    <div class="div2">
        <table>
            <tbody>
                <tr>
                    <td>table cell</td>
                    <td>table cell</td>
                    <!-- ... -->
                    <td>table cell</td>
                    <td>table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

데모

http://jsfiddle.net/simo/67xSL/

@HoldOffHunger 및 @bobince 답변을 기반으로 하는 Javascript 전용 솔루션

<div id="data">
  ...
</div>

function doubleScroll(element) {
    const scrollbar = document.createElement("div");
    scrollbar.appendChild(document.createElement("div"));
    scrollbar.style.overflow = "auto";
    scrollbar.style.overflowY = "hidden";
    scrollbar.firstChild.style.width = element.scrollWidth + "px";
    scrollbar.firstChild.style.paddingTop = "1px";
    scrollbar.firstChild.appendChild(document.createTextNode("\xA0"));
    let running = false;
    // Keep scrollbar in sync when element size changes
    new ResizeObserver(() => {
        scrollbar.firstChild.style.width = element.scrollWidth + "px";
    }).observe(element);
    scrollbar.onscroll = function () {
        if (running) {
            running = false;
            return;
        }
        running = true;
        element.scrollLeft = scrollbar.scrollLeft;
    };
    element.onscroll = function () {
        if (running) {
            running = false;
            return;
        }
        running = true;
        scrollbar.scrollLeft = element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
}

doubleScroll(document.getElementById("data"));

다음과 같은 작업을 수행하는 jQuery 플러그인을 사용할 수 있습니다.

• https://github.com/avianey/jqDoubleScroll

플러그인이 모든 논리를 처리합니다.

@StanleyH 솔루션을 기반으로 Angular를 만들었습니다.JS 지시, jsFiddle에 대한 데모.

사용하기 쉬운 제품:

<div data-double-scroll-bar-horizontal> {{content}} or static content </div>

각도용JS 개발자들

제가 알기로는 HTML과 CSS로는 이것이 불가능합니다.

스크롤러를 연결하는 것은 효과가 있었지만, 쓰여진 방식에서는 루프가 발생하여 스크롤러를 끌 때가 아니라 더 가벼운 스크롤바 부분을 클릭하고 길게 누르면 대부분의 브라우저에서 스크롤이 느려집니다.

깃발로 고정시켰습니다.

$(function() {
    x = 1;
    $(".wrapper1").scroll(function() {
        if (x == 1) {
            x = 0;
            $(".wrapper2")
                .scrollLeft($(".wrapper1").scrollLeft());
        } else {
            x = 1;
        }
    });


    $(".wrapper2").scroll(function() {
        if (x == 1) {
            x = 0;
            $(".wrapper1")
                .scrollLeft($(".wrapper2").scrollLeft());
        } else {
            x = 1;
        }
    });
});

React+TypeScript rap-2-h의 코드를 TypeScript로 포팅했습니다.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { ReactNode } from 'react';
import { useRef } from 'react';

const useStyles = makeStyles((theme) => ({
  wrapper1: {
    width: '300px',
    height: '20px',
    overflowX: 'scroll',
    overflowY: 'hidden',
    border: 'none 0px black',
  },
  wrapper2: {
    width: '300px',
    height: '100px',
    overflowX: 'scroll',
    overflowY: 'hidden',
    border: 'none 0px black',
  },
  div1: {
    width: '1000px',
    height: '20px',
  },
  div2: {
    width: '1000px',
    height: '100px',
    backgroundColor: '#88FF88',
    overflow: 'auto',
  }
}));

export default function TopBottomScrollBars() {
  const classes = useStyles();
  const wrapRef1 = useRef<HTMLDivElement>(null);
  const wrapRef2 = useRef<HTMLDivElement>(null);

  const handleScroll: React.EventHandler<React.UIEvent<ReactNode>> = (event: React.UIEvent<React.ReactNode> ) => {
    const targetDiv: HTMLDivElement = event.target as HTMLDivElement;

    if(targetDiv === wrapRef1.current && wrapRef2.current) {
      wrapRef2.current.scrollLeft = targetDiv.scrollLeft;
    }
    else if(targetDiv === wrapRef2.current && wrapRef1.current) {
      wrapRef1.current.scrollLeft = targetDiv.scrollLeft;
    }
  };

  return (
    <div>
      <div ref={wrapRef1} className={classes.wrapper1} onScroll={handleScroll} >
        <div id="div1" className={classes.div1}>
      </div>
    </div>

    <div ref={wrapRef2} className={classes.wrapper2} onScroll={handleScroll}>
      <div id="div2" className={classes.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>
    </div>
  );
}

바닐라 Javascript/Angular에서 다음과 같은 작업을 수행할 수 있습니다.

scroll() {
    let scroller = document.querySelector('.above-scroller');
    let table = document.querySelector('.table');
    table.scrollTo(scroller.scrollLeft,0);
  }

HTML:

<div class="above-scroller" (scroll)="scroll()">
  <div class="scroller"></div>
</div>
<div class="table" >
  <table></table>
</div>

CSS:

.above-scroller  {
   overflow-x: scroll;
   overflow-y:hidden;
   height: 20px;
   width: 1200px
 }

.scroller {
  width:4500px;
  height: 20px;
}

.table {
  width:100%;
  height: 100%;
  overflow: auto;
}

스탠리에 대한 확장H의 대답과 필요한 최소를 찾기 위해 제가 구현한 것은 다음과 같습니다.

자바스크립트(같은 곳에서 한 번 호출됨)$(document).ready()):

function doubleScroll(){
        $(".topScrollVisible").scroll(function(){
            $(".tableWrapper")
                .scrollLeft($(".topScrollVisible").scrollLeft());
        });
        $(".tableWrapper").scroll(function(){
            $(".topScrollVisible")
                .scrollLeft($(".tableWrapper").scrollLeft());
        });
}

HTML(폭이 스크롤 막대 길이를 변경합니다):

<div class="topScrollVisible" style="overflow-x:scroll">
    <div class="topScrollTableLength" style="width:1520px; height:20px">
    </div>
</div>
<div class="tableWrapper" style="overflow:auto; height:100%;">
    <table id="myTable" style="width:1470px" class="myTableClass">
...
    </table>

바로 그겁니다.

다음은 VueJS의 예입니다.

색인.페이지

<template>
  <div>
    <div ref="topScroll" class="top-scroll" @scroll.passive="handleScroll">
      <div
        :style="{
          width: `${contentWidth}px`,
          height: '12px'
        }"
      />
    </div>
    <div ref="content" class="content" @scroll.passive="handleScroll">
      <div
        :style="{
          width: `${contentWidth}px`
        }"
      >
        Lorem ipsum dolor sit amet, ipsum dictum vulputate molestie id magna,
        nunc laoreet maecenas, molestie ipsum donec lectus ut et sit, aut ut ut
        viverra vivamus mollis in, integer diam purus penatibus. Augue consequat
        quis phasellus non, congue tristique ac arcu cras ligula congue, elit
        hendrerit lectus faucibus arcu ligula a, id hendrerit dolor nec nec
        placerat. Vel ornare tincidunt tincidunt, erat amet mollis quisque, odio
        cursus gravida libero aliquam duis, dolor sed nulla dignissim praesent
        erat, voluptatem pede aliquam. Ut et tellus mi fermentum varius, feugiat
        nullam nunc ultrices, ullamcorper pede, nunc vestibulum, scelerisque
        nunc lectus integer. Nec id scelerisque vestibulum, elit sit, cursus
        neque varius. Fusce in, nunc donec, volutpat mauris wisi sem, non
        sapien. Pellentesque nisl, lectus eros hendrerit dui. In metus aptent
        consectetuer, sociosqu massa mus fermentum mauris dis, donec erat nunc
        orci.
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentWidth: 1000
    }
  },
  methods: {
    handleScroll(event) {
      if (event.target._prevClass === 'content') {
        this.$refs.topScroll.scrollLeft = this.$refs.content.scrollLeft
      } else {
        this.$refs.content.scrollLeft = this.$refs.topScroll.scrollLeft
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top-scroll,
.content {
  overflow: auto;
  max-width: 100%;
}
.top-scroll {
  margin-top: 50px;
}
</style>

참고:height: 12px제가 12px로 만들어서 맥유저에서도 볼 수 있을 것 같습니다.window를 0.합니다.

각진 버전

저는 여기서 두 개의 답을 합쳤습니다.(@simo 및 @simo 개발자)

https://stackblitz.com/edit/angular-double-scroll?file=src%2Fapp%2Fapp.component.html

인라인 부품

@Component({
  selector: 'app-double-scroll',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="wrapper1" #wrapper1>
      <div class="div1" #div1></div>
    </div>
    <div class="wrapper2" #wrapper2>
        <div class="div2" #div2>
            <ng-content></ng-content>
        </div>
    </div>
  `,
  styles: [
    `
      .wrapper1, .wrapper2 { width: 100%; overflow-x: auto; overflow-y: hidden; }
    `,
    `
      .div1 { overflow: hidden; height: 0.5px;}
    `,
    `
      .div2 { overflow: hidden; min-width: min-content}
    `
  ]
})
export class DoubleScrollComponent implements AfterViewInit {

  @ViewChild('wrapper1') wrapper1: ElementRef<any>;
  @ViewChild('wrapper2') wrapper2: ElementRef<any>;

  @ViewChild('div1') div1: ElementRef<any>;
  @ViewChild('div2') div2: ElementRef<any>;

  constructor(private _r: Renderer2, private _cd: ChangeDetectorRef) {
  }


  ngAfterViewInit() {

    this._cd.detach();

    this._r.setStyle(this.div1.nativeElement, 'width', this.div2.nativeElement.clientWidth + 'px' );

    this.wrapper1.nativeElement.onscroll = e => this.wrapper2.nativeElement.scroll((e.target as HTMLElement).scrollLeft, 0)
    this.wrapper2.nativeElement.onscroll = e => this.wrapper1.nativeElement.scroll((e.target as HTMLElement).scrollLeft, 0)

  }

}

예

<div style="width: 200px; border: 1px black dashed">

  <app-double-scroll>
    <div style="min-width: 400px; background-color: red; word-break: keep-all; white-space: nowrap;">
      long ass text long ass text long ass text long ass text long ass text long ass text long ass text long ass text long ass text 
    </div>
  </app-double-scroll>

  <br>
  <hr>
  <br>

  <app-double-scroll>
    <div style="display: inline-block; background-color: green; word-break: keep-all; white-space: nowrap;">
      short ass text
    </div>
  </app-double-scroll>

  <br>
  <hr>
  <br>

  <app-double-scroll>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
          <td>table cell</td>
        </tr>
      </tbody>
    </table>
  </app-double-scroll>

</div>

모든 앵귤러/네이티브 Js 팬들에게, @simo의 답변을 구현합니다.

HTML(변경 없음)

<div class="top-scroll-wrapper">
    <div class="top-scroll"></div>
</div>

CSS (변경 없음, 너비: 90%는 내가 원하는 것입니다)

.top-scroll-wrapper { width: 90%;height: 20px;margin: auto;padding: 0 16px;overflow-x: auto;overflow-y: hidden;}
.top-scroll { height: 20px; }

(좋아요)처럼)onload) 또는ngAfterViewChecked (모든것이것이모▁(as을위한을 위한 입니다.TypeScript)

let $topscroll = document.querySelector(".top-scroll") as HTMLElement
let $topscrollWrapper = document.querySelector(".top-scroll-wrapper") as HTMLElement
let $table = document.querySelectorAll('mat-card')[3] as HTMLElement

$topscroll.style.width = totalWidth + 'px'
$topscrollWrapper.onscroll = e => $table.scroll((e.target as HTMLElement).scrollLeft, 0)
$table.onscroll = e => $topscrollWrapper.scroll((e.target as HTMLElement).scrollLeft, 0)

이것은 부트스트랩과 간단한 사용을 위한 바닐라 js의 나의 솔루션입니다.

<div class="table-responsive table-responsive-scrollbar-top"></div>
<div class="table-responsive">
    <table class="table">
    <!-- ... table code ... -->
    </table>
</div>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        let mains = document.querySelectorAll('.table-responsive');
        if (mains.length > 0) {
            Array.from(mains).forEach(function(main) {
                let top = main.previousElementSibling.matches('.table-responsive-scrollbar-top') ? main.previousElementSibling : null;
                if (top) {
                    let timeout = false;
                    let toggleScrollbar;

                    top.style.display = 'none';
                    
                    if (!top.firstElementChild) {
                        top.appendChild(document.createElement("div"));
                    }

                    (toggleScrollbar = function() {
                        
                        if (main.offsetWidth < main.scrollWidth) {
                            top.style.display = 'block';
                            top.style.height = (main.offsetHeight - main.clientHeight) + 'px';
                            top.firstElementChild.style.width = main.scrollWidth + 'px';
                        } else {
                            top.style.display = 'revert';
                        }
                    })();

                    addEventListener('resize', (event) => {
                        clearTimeout(timeout);
                        timeout = setTimeout(toggleScrollbar, 250);
                    });

                    top.addEventListener('scroll', function(e) {
                        main.scrollLeft = top.scrollLeft;
                    });
                    main.addEventListener('scroll', function(e) {
                        top.scrollLeft = main.scrollLeft;
                    });
                }
            });
        }
    });
</script>

https://github.com/lsblsb/bootstrap-table-responsive-scrollbar-top

웹킷 브라우저 또는 모바일 브라우저에서 iscroll.js를 사용하는 경우 다음을 시도할 수 있습니다.

$('#pageWrapper>div:last-child').css('top', "0px");

이를 달성하기 위한 AngularJs 지침:이를 사용하려면 요소에 CSS 클래스 더블 hscroll을 추가합니다.이를 위해서는 jQuery와 AngularJs가 필요합니다.

import angular from 'angular';

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
  $scope.name = 'Dual wielded horizontal scroller';
});

app.directive('doubleHscroll', function($compile) {
  return {
restrict: 'C',
link: function(scope, elem, attr){

  var elemWidth = parseInt(elem[0].clientWidth);

  elem.wrap(`<div id='wrapscroll' style='width:${elemWidth}px;overflow:scroll'></div>`); 
  //note the top scroll contains an empty space as a 'trick' 
  $('#wrapscroll').before(`<div id='topscroll' style='height:20px; overflow:scroll;width:${elemWidth}px'><div style='min-width:${elemWidth}px'> </div></div>`);

  $(function(){
    $('#topscroll').scroll(function(){
      $("#wrapscroll").scrollLeft($("#topscroll").scrollLeft());
    });
    $('#wrapscroll').scroll(function() {
      $("#topscroll").scrollLeft($("#wrapscroll").scrollLeft());
    });

  });  

}

  };


});

Dario Digregio https://stackoverflow.com/a/63507769/4541566 답변 확장(여기에 표시됨) 컨테이너 하단이 보기로 스크롤되는지 여부에 따라 스크롤 막대를 콘텐츠 위와 아래로 이동할 수 있었습니다.

    setTimeout(()=>{
      const container = document.querySelector('.container');
      const content = document.querySelector('.content');
      handleWindowScroll();

      function handleWindowScroll() {
        const viewportHeight = window.innerHeight;
        const containerRect = container.getBoundingClientRect();
        const containerTop = containerRect.top;
        const containerHeight = containerRect.height;
        const containerBottom = containerTop + containerHeight;

        const scrollThreshold = 100; // adjust this value as needed
        if (containerBottom <= viewportHeight + scrollThreshold) {
          // bottom of container is visible in viewport
          container.style.transform = '';
          content.style.transform = '';
        } else {
          // bottom of container is not visible in viewport
          container.style.transform = 'rotateX(180deg)';
          content.style.transform = 'rotateX(180deg)';
        }
      }

      window.addEventListener('scroll', handleWindowScroll);

    }, 200);        

참고로 제가 setTimeout을 사용하는 이유는 다른 구성 요소가 있기 때문에 조금 기다려야 하므로 사용할 필요가 없을 수도 있습니다.

제가 해결책을 찾고 있었어요react버전이지만 적절한 해결책을 찾는 것은 정말 어려웠습니다.마침내 나는 npm으로부터 수정을 받았습니다.

반응-이중 스크롤 막대

https://www.npmjs.com/package/react-double-scrollbar

render() {
    return (
      <div>
        <DoubleScrollbar>
          <table>...</table>
        </DoubleScrollbar>
      </div>
    );
  }

언급URL : https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table