表格顶部和底部的水平滚动条

Question

table我的页面上有一个非常大的.所以我决定放一个放在桌子底部的水平滚动条.但我希望这个滚动条也在桌面上.

我在模板中的内容是:

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

这可能只用于HTML和CSS吗？

Answer 1

要在元素顶部模拟第二个水平滚动条,请在div具有水平滚动的元素上方放置一个"虚拟" ,这对于滚动条来说足够高.然后为虚拟元素和真实元素附加"scroll"事件的处理程序,以便在移动任一滚动条时使另一个元素同步.虚拟元素看起来像真实元素上方的第二个水平滚动条.

对于一个实例,请看这个小提琴

这是代码:

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

Answer 2

尝试使用该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>

Answer 3

有一种方法可以实现这一点，我在这里没有看到任何人提到。

通过将父容器旋转180 度并将子容器再次旋转180 度，滚动条将显示在顶部

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

有关参考，请参阅w3c 存储库中的问题。

Answer 4

首先是很好的答案@StanleyH如果有人想知道如何制作动态宽度的双滚动容器

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>

演示

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

Answer 5

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

Answer 6

您可以使用jquery插件来完成这项工作:

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

该插件将为您处理所有逻辑...

Answer 7

基于@HoldOffHunger 和@bobince 答案的仅 javascript 解决方案

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

Answer 8

StanleyH的回答很好，但是有一个不幸的错误：单击滚动条的阴影区域不再跳转到您单击的选择。取而代之的是，滚动条的位置增加了一个很小且令人讨厌的增量。

经过测试：4个版本的Firefox（影响100％），4个版本的Chrome（影响50％）。

这是我的jsfiddle。您可以通过具有on / off（true / false）变量来解决此问题，该变量一次只允许一个onScroll（）事件触发：

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的滚动调用发生冲突，发生事件冲突，并且最终结果是滚动条中没有跳跃。

希望这可以帮助其他人！

Answer 9

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

Answer 10

基于@StanleyH解决方案，我创建了一个AngularJS指令，演示上的jsfiddle。

便于使用：

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

对于 AngularJS 开发人员