模擬沒有任何插件或UI的滾動條 - 可能與否？

我有一個div列表裏面。 div設置爲overflow:hidden。旁邊的div我有一個小手柄，來控制滾動。模擬沒有任何插件或UI的滾動條 - 可能與否？

首先，我想知道是否有可能使該列表滾動取決於句柄是否正在向上或向下。但我想這樣做沒有overflow:scroll，沒有任何插件，沒有jQuery UI。

只能用純JavaScript/Jquery。我在網上找不到任何東西。這一定是可能的，對吧？

我不需要它向上或向下滾動鍵。我不需要向上滾動，向下滾動按鈕。只有一點點把柄。我甚至不需要用鼠標滾輪滾動。

可能嗎？

來源

2012-10-11 Lelly

我不認爲這存在。 – desbest

如果你不想使用jQuery，那麼不要用'jquery'「垃圾標籤」你的問題。標籤已移除。 – Sparky

我從來沒有說過我不想使用jQuery。對我來說還好。添加標籤回來和編輯問題，所以它更清晰 – Lelly

如果你想自己做，這將是這樣的：

您可以定義一些風格：

* { padding:0; margin:0; } 
.container { padding:0 10px; margin:0; background-color:#444; width:400px; height:400px; overflow:hidden; } 
.scrollable { background-color:#5a5; width:100%; height:800px; position:relative; top:0; } 
p { margin:0 0 30px 0; }

然後將HTML：

<div class="container"> 
    <div class="scrollable"> 
     <p>Line 1</p> 
     <p>Line 2</p> 
     <p>Line 3</p> 
     <p>Line 4</p> 
     <p>Line 5</p> 
     ... 
    </div> 
</div>

你也可以使用jquery改變元素的'頂部'位置：

function scroll(target, x) 
{ 
    $(target).animate({ top: x, duration: 2000}); 
}

您可以從鼠標滾動這樣調用該函數，處理程序被移動或其他一些事件：

scroll(".scrollable", "50%");

然而，可能會更好地使用現有的庫，AREADY這樣做，因爲其他人指出，，這取決於你的要求。

來源

2012-10-11 23:13:43 Pato

模擬沒有任何插件或UI的滾動條 - 可能與否？

回答

相關問題