我如何在谷歌浏览器的表格的tbody元素上放置左侧滚动条? [英] How do I position a left scrollbar on a tbody element of a table for Google Chrome?

查看:364
本文介绍了我如何在谷歌浏览器的表格的tbody元素上放置左侧滚动条?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我研究过这个问题,找不到解决方案。
该网站是RTL网站,所以我希望左侧的滚动条。
我已经看到了一些可以完成这件事的黑客,除非我真的需要它。



表格的Tbody元素需要向下滚动,不需要标题行消失。
我可以得到tbody右侧的滚动条,但不知道如何将它移动到左侧。



任何想法如何获得TBody的左侧滚动条将受到非常赞赏。



幸运的是,它只需要在谷歌浏览器上工作。

解决方案

它不能用CSS来改变。例如,有些浏览器(iPhone,ANdroid)没有滚动条。滚动条的位置完全取决于用户的系统,而不是网页。

你可以使用Javascript来模拟你想要的。做一个可拖动的滚动条替换,放置在左侧,并根据用户拖动滚动条调整隐藏溢出。



尝试使用jquery滚动条或javascript滚动条。

这是一个有趣的滚动替代方法...拖动(类似于您在Google地图中拖动地图的方式):
http://plugins.jquery.com/project/MapScroller



另一种方法是,这是一个脚本,用于计算用户滚动条的宽度:
http://plugins.jquery.com/project/ba-jquery-scrollbarwidth-plugin
您可以计算宽度,然后用溢出隐藏滚动条:hidden然后在左侧添加一个div,其高度与要滚动的框的高度相同,并且与用户的滚动条的宽度相同,然后编写一个滚动右侧滚动条的脚本x到与左侧相同的位置,从而模仿内置的系统滚动条。



有无尽的可能性,只需使用google即可找到您需要的内容并获得创意。 ;)



但是,我想这正是你要找的:
http://baijs.nl/tinyscrollbar/
正如您在示例中看到的那样,滚动条由元素组成。如果你愿意的话,你可以将它们放在左边。

也许这样,以及:
http://plugins.jquery.com/project/tbodyscroll
完全是您所需要的。 ;)



检查一下,这里有一个工作示例: http://jsfiddle.net/trusktr/xQSxJ/



我会尽快更新有一张桌子只是为了我自己的锻炼。 ;)

通常情况下,您只能找到部分解决方案,并需要即兴创建完整而独特的解决方案。 :)祝你好运。


I have looked into this issue and can not find a solution. The web site is a RTL site so I would like the scrollbars on the left. I have seen some hacks that can get this done except where I really need it.

The Tbody element of the table needs to scroll down without the header row disappearing. I can get the scrollbar on the right hand side of the tbody but have no idea how to move it to the left.

Any ideas how to get the TBody's scrollbar on the left hand side will be much appreciated.

I am lucky it only has to work on Google Chrome.

解决方案

It can't be changed with CSS. For example, there are browsers (iPhone, ANdroid) that don't have scroll bars. The scroll bar position depends entirely on the user's system, not the web page.

You can use Javascript to imitate what you want. Make a draggable scroll bar replacement, place it on the left, and adjust the hidden overflow according while the user drags the "scrollbar".

Try googling for "jquery scrollbar" or "javascript scrollbar".

Here's a an interesting alternative to scrolling... Dragging (similar to how you drag maps in google maps): http://plugins.jquery.com/project/MapScroller

And yet another alternative, here's a script that calculates the width of the users scroll bar: http://plugins.jquery.com/project/ba-jquery-scrollbarwidth-plugin You can calculate the width, then hide the scroll bar with overflow:hidden then add a div on the left with same height as the box you want to scroll and same width as the user's scrollbar, then write a script that scrolls the right box to the same position as the one on the left, thus imitating built in system scrollbars.

There's endless possibilities, just use google to find what you need and get creative. ;)

But, I think this is exactly what you're looking for: http://baijs.nl/tinyscrollbar/ As you can see in the examples, the scrollbar is made of elements. You can position them on the left if you'd like.

Perhaps that, along with this: http://plugins.jquery.com/project/tbodyscroll is EXACTLY what you need. ;)

Check this out, here's a working example: http://jsfiddle.net/trusktr/xQSxJ/

I'll update it soon to work with a table just for my own exercise. ;)

Often times you will only find partial solutions and will need to improvise to come up with a complete and unique solution. :) Good luck.

这篇关于我如何在谷歌浏览器的表格的tbody元素上放置左侧滚动条?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆