【问题标题】:Custom Scroll: How to hide the scrollbar and create a button that will scroll on click?自定义滚动:如何隐藏滚动条并创建一个在点击时滚动的按钮?
【发布时间】:2019-02-27 18:56:55
【问题描述】:

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

【问题讨论】:

    标签: jquery html css scroll scrollbar


    【解决方案1】:

    使用

    滚动顶部

    来自 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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-12-10
      • 2016-07-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多