自定义滚动:如何隐藏滚动条并创建一个单击后即可滚动的按钮?

时间:2019-02-27 18:56:55

标签: jquery html css scroll scrollbar

我不确定从何处开始或是否有可能。我有一个包含文本的div,当文本太长而无法容纳在一行中时,它将显示滚动条以允许用户向左/向右滚动。我的客户想要删除滚动条(但保留滚动功能),而是要有一个箭头,供用户单击以滚动。 css / jquery是否可行?如果可以,怎么办?

1 个答案:

答案 0 :(得分:1)

使用

  

scrollTop

jQuery的功能

$("#scroll").click(function(e) {
    var scrollTop = $('#example').scrollTop();
    $('#example').scrollTop(scrollTop+5);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="scroll">scroll</button>
<div id="example" style="width:300px;height:200px;overflow:hidden">
Lorem ipsum sapien ante ut risus, dictum faucibus vehicula interdum proin magna, aliquam interdum sollicitudin tempus. viverra nisl sociosqu curabitur pharetra proin gravida pellentesque, neque felis aliquam ante ullamcorper nisi consectetur, iaculis elementum convallis quis curabitur tincidunt pharetra, platea sagittis euismod cras habitant lorem. torquent congue tortor in tortor vulputate dictumst per, pellentesque luctus sapien dolor eleifend sagittis ullamcorper leo, vulputate senectus eleifend viverra varius quisque. class ligula adipiscing metus primis platea dictumst nibh felis etiam a commodo platea congue vivamus, ultrices proin arcu mollis netus arcu vel fusce libero nostra quisque odio. 

	Non quisque potenti quisque ligula habitant varius porta ultricies nisi sagittis eros, interdum id elit habitasse tincidunt justo libero proin magna velit erat, viverra praesent eget risus nullam suscipit leo amet blandit vestibulum. tempus sodales lacus venenatis aliquam vivamus maecenas potenti, laoreet tempus fusce conubia maecenas scelerisque eros, volutpat praesent vel justo urna erat. nam cursus tincidunt nec placerat aliquam curae class, nulla aenean felis lacinia taciti nullam purus torquent, litora eleifend aenean posuere diam tortor. blandit tempus egestas vulputate primis aenean pretium quis elit et nostra eu, fames iaculis felis elit porta augue ante dapibus ultrices curae, ornare semper id ut nisl fusce congue urna proin non.
</div>