Sayfamda çok büyük bir değer tablevar. Bu yüzden masanın altına yatay bir kaydırma çubuğu koymaya karar verdim. Ama bu kaydırma çubuğunun da masanın üstünde olmasını istiyorum.

Şablonda ne var:

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

Bu yalnızca HTML ve CSS'de yapılabilir mi?

Bir öğenin üstünde ikinci bir yatay kaydırma çubuğunu simüle etmek için div, yatay kaydırma özelliğine sahip bir kaydırma çubuğuna yetecek kadar yüksek bir "kukla" yerleştirin. Ardından, kaydırma çubuğundan biri hareket ettirildiğinde diğer öğenin senkronize olmasını sağlamak için yapay öğe ve gerçek öğe için "kaydırma" olayının işleyicilerini ekleyin. Sahte öğe, gerçek öğenin üzerinde ikinci bir yatay kaydırma çubuğu gibi görünür.

Canlı bir örnek için bu kemana bakın

İşte kod :

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

jquery.doubleScrollEklentiyi kullanmayı deneyin :

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>

Her şeyden önce, büyük cevap, @StanleyH. Birisi dinamik kaydırma ile çift kaydırma kabının nasıl yapılacağını merak ediyorsa:

css

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

js

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

gösteri

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

JQuery olmadan (2017)

JQuery'e ihtiyacınız olmayabileceğinden, @StanleyH yanıtına dayanan çalışan bir Vanilla JS sürümü:

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>

İşi sizin için yapacak bir jQuery eklentisi kullanabilirsiniz:

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

Eklenti sizin için tüm mantığı işleyecektir.

StanleyH'nin cevabı mükemmeldi, ama talihsiz bir hata vardı: kaydırma çubuğunun gölgeli alanına tıklamak artık tıkladığınız seçime atlamıyor. Bunun yerine, kaydırma çubuğunun konumunda çok küçük ve biraz can sıkıcı bir artış var.

Test edildi: 4 Firefox sürümü (% 100 etkilenen), 4 Chrome sürümü (% 50 etkilenen).

İşte benim jsfiddle . Tek seferde yalnızca bir onScroll () olayının tetiklenmesine izin veren bir açma / kapama (true / false) var seçeneğiyle bu sorunu çözebilirsiniz:

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

Kabul Edilen Cevapla Sorun Davranışı:

Aslında İstenen Davranış:

Peki, bu neden oluyor? Kod üzerinde çalışırsanız, wrapper1 öğesinin wrapper2'nin scrollLeft öğesini çağırdığını ve wrapper2'nin wrapper1'in scrollLeft öğesini çağırdığını ve bunu sonsuz bir şekilde tekrarladığını göreceksiniz, bu nedenle sonsuz bir döngü sorunumuz var. Ya da, daha doğrusu: kullanıcının kaydırmaya devam etmesi, wrapperx'ın kaydırma çağrısıyla çakışır, bir olay çakışması oluşur ve sonuç kaydırma çubuklarında atlama olmaz.

Umarım bu başka birine yardımcı olur!

Kaydırıcıları bağlamak işe yaradı, ancak yazıldığı şekilde, daha hafif kaydırma çubuğunun parçasına tıklayıp basılı tutarsanız (kaydırma çubuğunu sürüklerken değil) çoğu tarayıcıda kaydırmayı yavaşlatan bir döngü oluşturur.

Bir bayrakla düzelttim:

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

@HoldOffHunger ve @bobince yanıtlarına dayanan yalnızca javascript çözümü

<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'));

@StanleyH çözümüne dayanan Bir oluşturulan angularjs yönergesi üzerinde demo jsFiddle .

Kullanımı kolay:

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

AngularJS geliştiricileri için

Bildiğim kadarıyla bu HTML ve CSS ile mümkün değil.

Vanilya Javascript / Angular'da bunu şöyle yapabilirsiniz:

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

StanleyH'nin cevabını genişleterek ve gereken minimum değeri bulmaya çalışırken, uyguladığım şey:

JavaScript (aşağıdaki gibi bir yerden bir kez çağrılır $(document).ready()):

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

HTML (genişliklerin kaydırma çubuğu uzunluğunu değiştireceğini unutmayın):

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

Bu kadar.

@ simo'nun cevabını uygulayarak tüm açısal / nativeJs hayranlarına

HTML (değişiklik yok)

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

CSS (değişiklik yok, genişlik:% 90 tasarımımdır)

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

JS (beğen onload) veya ngAfterViewChecked(hepsi asiçin 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)

Webkit tarayıcısında veya mobil tarayıcıda iscroll.js kullanıyorsanız şunları deneyebilirsiniz:

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

Bunu başarmak için bir AngularJs yönergesi: Bunu kullanmak için, öğenize css sınıfı çift hscroll ekleyin. Bunun için jQuery ve AngularJ'lere ihtiyacınız olacak.

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

  });  

}

  };


});

İşte VueJS için bir örnek

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>

ALACAĞIZ NOT üzerinde height: 12px.. o da Mac Kullanıcıları fark edilecektir o yüzden 12px yaptı. Ancak pencereli, 0.1px yeterince iyi

Kaydırma yönüyle ilgili bir sorun var: rtl. Eklenti doğru desteklemiyor gibi görünüyor. İşte keman: keman

Chrome'da düzgün çalıştığını, ancak diğer tüm popüler tarayıcılarda üst kaydırma çubuğu yönünün solda kaldığını unutmayın.