本文介绍了删除滚动条,但不滚动功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我知道你可以定义overflow:hidden;在HTML的主体上删除滚动条,但我仍然可以用箭头滚动或滚动鼠标。



提前感谢任何帮助。



编辑:
感谢所有关于悬停滚动条和自定义栏的建议。还要感谢您通过删除滚动条来影响用户体验的所有问题。



我有一个圆形页面(如果你滚动滚轮或箭头按钮,当它到达底部它重置到页面的顶部,并再次启动)。一个永无止境的循环。滚动条影响到这一点,因为条被限制,当它到达底部并且重置到顶部时,用户鼠标仍然在页面的底部意思,当它们移动时,在页面的顶部和底部之间存在一些闪烁。



我计划删除滚动条,并用窗口顶部和底部的箭头按钮替换它。这是为什么我想彻底删除滚动条,但保留滚动功能。

解决方案

有一个jQuery名为jscrollpane 可以修改很多。



但是如果你只想隐藏栏,你也可以把这个滚动条从视图中移开:

 < div id =content> 
< div id =scrollable> ... ... ...< / div>
< / div>

使用CSS

  #content {
position:relative;
width:200px;
height:150px;
border:1px solid black;
overflow:hidden;
}
#scrollable {
height:150px;
width:218px; / *#content.width + 18px * /
overflow-y:scroll;
}

这全部基于18像素的条形宽度。






因此,我们可以做一些javascript滚动条宽度检测脚本,或者简单地添加另一个div, p>



HTML现在是:

 < div id =content> 
< div id =scrollable>
< div id =txt> ... ... ...
< / div>< / div>< / div>

使用CSS:

  #content {
position:relative;
width:200px;
height:150px;
border:1px solid black;
overflow:hidden;
}
#scrollable {
height:150px;
width:240px; / * bar-width可以是理论240px - 200px = 40px * /
overflow-y:scroll;
}
#txt {
width:200px;
}

I know you can define overflow:hidden; on the body of the HTML to remove the scrollbar, but I would like to still be able to scroll with the arrows or scroll wheel on a mouse.

Thanks in advance for any help.

Edit:Thanks for all the advice about on hover scrollbars and custom bars. Also thank you for all concerns about impacting users experience by removing the scrollbars. I shall elaborate a little more so you explain where I am coming from.

I have a circular page (if you scroll with a scroll wheel or arrow button, when it reaches the bottom it resets to the top of the page and starts again). A never ending loop. A scrollbar impacts on this as a bar is limited and when it reaches the bottom and resets to the top the users mouse is still at the bottom of the page meaning when they move it there is some flickering between the top and bottom of the page.

I plan to remove the scroll bar and replace it with arrow buttons at the top and the bottom of the window. This is why I would like to remove the scrollbar completely but leave the scrolling functionality.

解决方案

There is a library for jQuery named jscrollpane http://jscrollpane.kelvinluck.com/#examples that can modify very much.

But if you only want to hide the bar, you can also push this scrollbar out of view: http://jsfiddle.net/H27BK/

<div id="content">
    <div id="scrollable"> ... ... ... </div>
</div>

with CSS

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;
   width: 218px; /* #content.width + 18px */
   overflow-y: scroll;
}

This all based up on a bar-width of 18 pixel.


So we can do some javascript scrollbar width detection script or simply add another div that we put in front of the scrollable div.

http://jsfiddle.net/uNzEz/

HTML is now:

<div id="content">
<div id="scrollable">
<div id="txt"> ... ... ...
</div></div></div>

with CSS like:

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;
   width: 240px; /* the bar-width can be theoretical 240px - 200px = 40px */
   overflow-y: scroll;
}
#txt {
    width: 200px;
}

这篇关于删除滚动条,但不滚动功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-24 06:38