복붙노트

[JQUERY] 수평 상단에 스크롤 및 테이블의 맨 아래

JQUERY

수평 상단에 스크롤 및 테이블의 맨 아래

해결법

  1. 1.요소의 상단에 제 2 수평 스크롤을 시뮬레이션하기 위해, 수평 스크롤, 스크롤 단지 충분히 높은이있는 요소 위에 "더미"사업부를 넣어. 다음 중 하나를 스크롤 이동할 때 동기화의 다른 요소를 얻기 위해, 더미 요소와 실제 요소에 대한 "스크롤"이벤트의 핸들러를 연결합니다. 더미 요소는 실제 요소 위의 제 2 수평 스크롤처럼 보일 것입니다.

    요소의 상단에 제 2 수평 스크롤을 시뮬레이션하기 위해, 수평 스크롤, 스크롤 단지 충분히 높은이있는 요소 위에 "더미"사업부를 넣어. 다음 중 하나를 스크롤 이동할 때 동기화의 다른 요소를 얻기 위해, 더미 요소와 실제 요소에 대한 "스크롤"이벤트의 핸들러를 연결합니다. 더미 요소는 실제 요소 위의 제 2 수평 스크롤처럼 보일 것입니다.

    라이브 예를 들어,이 바이올린을 참조

    여기 코드는 :

    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());
  });
});

  2. 2.jquery.doubleScroll 플러그인을 사용해보십시오 :

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

    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>

  3. 3.당신이 JQuery와 필요하지 않을 수도 있기 때문에, 여기 @StanleyH의 답변에 따라 작업 바닐라 JS 버전은 다음과 같습니다

    당신이 JQuery와 필요하지 않을 수도 있기 때문에, 여기 @StanleyH의 답변에 따라 작업 바닐라 JS 버전은 다음과 같습니다

    VAR wrapper1 = document.getElementById를 ( 'wrapper1'); VAR wrapper2 = document.getElementById를 ( 'wrapper2'); wrapper1.onscroll = 함수 () { wrapper2.scrollLeft = wrapper1.scrollLeft; }; wrapper2.onscroll = 함수 () { wrapper1.scrollLeft = wrapper2.scrollLeft; }; # wrapper1, #의 wrapper2 {폭 : 300 픽셀; 국경 : RED 0 픽셀 없음; 오버플-X : 스크롤; 오버 플로우-Y : 숨겨진;} # wrapper1 {높이 : 20 픽셀; } # wrapper2 {높이 : 100 픽셀; } # div1 {폭 : 1000px; 높이 : 20 픽셀; } # DIV2 {폭 : 1000px; 높이 : 100 픽셀; 배경 색상 : # 88FF88; 오버 플로우 : 자동;} 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

  4. 4.우선, 훌륭한 대답 @StanleyH. 누군가가 동적 폭 이중 스크롤 컨테이너를 만드는 방법을 궁금해하는 경우 :

    우선, 훌륭한 대답 @StanleyH. 누군가가 동적 폭 이중 스크롤 컨테이너를 만드는 방법을 궁금해하는 경우 :

    .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());
});

    <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/

  5. 5.StanleyH의 대답은 우수했다, 그러나 그것은 하나의 불행한 버그가 있었다 : 스크롤이 더 이상를 클릭 선택에 점프의 음영 지역을 클릭. 대신, 당신이 얻을 것은 스크롤의 위치에 아주 작은 다소 성가신 증가이다.

    StanleyH의 대답은 우수했다, 그러나 그것은 하나의 불행한 버그가 있었다 : 스크롤이 더 이상를 클릭 선택에 점프의 음영 지역을 클릭. 대신, 당신이 얻을 것은 스크롤의 위치에 아주 작은 다소 성가신 증가이다.

    테스트 : 파이어 폭스 4 개 버전 (100 % 영향), 크롬의 4 버전 (50 % 영향).

    여기 내 jsfiddle입니다. 한 번에 트리거 온 / 오프 (참 / 거짓의) 하나의 onScroll을 (수 VAR) 이벤트를함으로써 이것을 주위를 얻을 수 있습니다 :

    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());
});

    허용 답변으로 문제 행동 :

    실제로 행동을 원하는 :

    그래서, 단지 왜 이런 일이 무엇입니까? 당신이 코드를 실행하면, 그래서 우리는 무한 루프 문제가, 당신은 scrollLeft에있어 wrapper2 그 wrapper1 호출을 확인할 수 있으며 wrapper2는 wrapper1의 scrollLeft에 호출하고 무한이 반복합니다. 또는, 오히려 다음 스크롤의 wrapperx의 호출로 사용자 충돌의 스크롤 계속 이벤트 충돌이 발생하고, 최종 결과는 스크롤에는 점프입니다.

    이것은 다른 사람이 밖으로 도움이되기를 바랍니다!

  6. 6.당신은 당신을 위해 일을 할 것을의 플러그인 jQuery를 사용할 수 있습니다 :

    당신은 당신을 위해 일을 할 것을의 플러그인 jQuery를 사용할 수 있습니다 :

    플러그인은 당신을 위해 모든 논리를 처리합니다.

  7. 7.@HoldOffHunger 및 @bobince 답변을 기반으로 자바 스크립트 유일한 해결책

    @HoldOffHunger 및 @bobince 답변을 기반으로 자바 스크립트 유일한 해결책

    <div id="doublescroll">

    .

    function DoubleScroll(element) {
            var 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'));
            var running = false;
            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('doublescroll'));

  8. 8.스크롤러을 연결하면 작동하지만 표기되는 방법으로는 가벼운 스크롤의 부분을 클릭하고 (스크롤러를 드래그하지 않을 때)를 유지하는 경우 대부분의 브라우저에서 느린 스크롤하게 루프를 만듭니다.

    스크롤러을 연결하면 작동하지만 표기되는 방법으로는 가벼운 스크롤의 부분을 클릭하고 (스크롤러를 드래그하지 않을 때)를 유지하는 경우 대부분의 브라우저에서 느린 스크롤하게 루프를 만듭니다.

    나는 플래그를 고정 :

    $(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;
        }
    });
});

  9. 9.@StanleyH 솔루션을 기반으로 나는 jsFiddle에 AngularJS와 지시어, 데모를 만들었습니다.

    @StanleyH 솔루션을 기반으로 나는 jsFiddle에 AngularJS와 지시어, 데모를 만들었습니다.

    사용하기 쉬운:

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

    AngularJS와 개발자를위한

  10. 10.지금까지 내가 알고 있어요 이것은 HTML과 CSS와 함께 할 수 없습니다.

    지금까지 내가 알고 있어요 이것은 HTML과 CSS와 함께 할 수 없습니다.

  11. 11.바닐라 자바 ​​스크립트 / 각도에서 당신은 다음과 같이이 작업을 수행 할 수 있습니다

    바닐라 자바 ​​스크립트 / 각도에서 당신은 다음과 같이이 작업을 수행 할 수 있습니다

    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;
}

  12. 12.나는 누군가가 여기에 언급 보지 않았다 이것을 달성하는 한 가지 방법이있다.

    나는 누군가가 여기에 언급 보지 않았다 이것을 달성하는 한 가지 방법이있다.

    180도 부모 컨테이너 180 도의 스크롤 다시 자식 컨테이너 회전하여 상단에 표시 될

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

    참고로 W3C의 저장소에 문제를 참조하십시오.

  13. 13.StanleyH의 대답에 확장하고, 여기에 필요한 최소를 찾기 위해 노력하는 것은 내가 구현 것입니다 :

    StanleyH의 대답에 확장하고, 여기에 필요한 최소를 찾기 위해 노력하는 것은 내가 구현 것입니다 :

    ($ (문서 같은 곳에서 한 번만 호출) .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>

    이게 다예요.

  14. 14.SIMO의 대답 @ 구현하는 모든 각도 /의 nativeJs 팬에

    SIMO의 대답 @ 구현하는 모든 각도 /의 nativeJs 팬에

    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; }

    JS (온로드 등) 또는 ngAfterViewChecked (모두가 같은 타이프위한)

    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)

  15. 15.당신이 웹킷 브라우저 또는 모바일 브라우저에 iscroll.js를 사용하는 경우, 당신은 시도 할 수 있습니다 :

    당신이 웹킷 브라우저 또는 모바일 브라우저에 iscroll.js를 사용하는 경우, 당신은 시도 할 수 있습니다 :

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

  16. 16.AngularJS와이를 달성하기위한 지시문 : 그것을 사용하여 요소에 CSS 클래스를 두 번이 hscroll을 추가합니다. 당신은 이것에 대한 jQuery를하고 AngularJS와이 필요합니다.

    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());
    });

  });  

}

  };


});

  17. 17.여기 VueJS위한 예시이며

    여기 VueJS위한 예시이며

    index.page

    <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>

    높이에 걸릴 참고 :이뿐만 아니라 Mac 사용자에 발견 할 수 있도록 12 픽셀은 .. 나는 그것을 12 픽셀했다. 그러나 / 창 승, 0.1px 좋은 충분하다

  18. 18.여기이 개 답변을 결합했다. (@simo 및 @bresleveloper)

    여기이 개 답변을 결합했다. (@simo 및 @bresleveloper)

    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>

  19. 19.스크롤 방향에 문제가 있습니다 : RTL은. 이 플러그인이 제대로 지원하지 않는 것 같습니다. 여기 바이올린은 다음과 같습니다 바이올린

    스크롤 방향에 문제가 있습니다 : RTL은. 이 플러그인이 제대로 지원하지 않는 것 같습니다. 여기 바이올린은 다음과 같습니다 바이올린

    이 크롬에서 제대로 작동하지만 다른 모든 인기있는 브라우저의 상단의 스크롤 막대 방향의 유적이 남아 있습니다.

    20. from https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 자바 스크립트에서 X, Y 좌표를 사용하여 클릭을 시뮬레이션?  (0) 2020.10.06
[JQUERY] 자바 스크립트 : 객체에 대한 필터 ()  (0) 2020.10.06
[JQUERY] 어떻게 JQuery와 또는 자바 스크립트와 객체의 배열을 정렬하려면 [중복]  (0) 2020.10.06
[JQUERY] `on`와`live` 또는`bind`의 차이점은 무엇입니까?  (0) 2020.10.06
[JQUERY] 어떻게 해제 HTML 링크에  (0) 2020.10.06
,

티스토리툴바