我想使滚动条始终与滚动条拇指一起显示在div中

时间:2019-07-17 06:16:38

标签: html css

我正在div上滚动实现工具,效果很好,但用户也可以删除其中的元素。我希望该div始终可滚动,但是如果用户从中删除元素,则滚动条分配器。

我尝试过overflow-y: scroll并增加了身高。它的工作原理是:始终有一个滚动条可见,但是滚动条没有拇指,这意味着我无法通过鼠标滚轮或滚动条上的箭头滚动。

因此,如果有人可以帮助我使滚动条滑块始终可见,那就太好了。

这是我正在谈论的div:

<div id="external-events" class="mt-actions" style="height: 530px; width: auto; overflow-y: scroll;"></div>

Scroll

scrollbar without thumb

1 个答案:

答案 0 :(得分:0)

请使用隐藏的溢出直到鼠标移到它上面,然后将其设置为自动。 请注意,16px的填充假定滚动条的宽度为16px,并且该滚动条在那里,因此当滚动条出现时,文本不会重新换行

下面的代码段

        div.myautoscroll {
            height: 40em;
            width: 40em;
            overflow: hidden;
            border: 1px solid #444;
            margin: 3em;
        }
        div.myautoscroll:hover {
            overflow: auto;
        }
        div.myautoscroll p {
            padding-right: 16px;
        }
        div.myautoscroll:hover p {
            padding-right: 0px;
        }
        <div class="myautoscroll">
            <p>
            This is a test for the stackoverflow question by Mathan
            </p>

            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tincidunt
            odio sit amet eleifend. Nullam mattis posuere est, ut hendrerit ipsum ultrices
            non. Aliquam erat volutpat. Aliquam hendrerit, odio at euismod fermentum, arcu
            nunc sagittis enim, eget malesuada nulla risus rhoncus massa. In in varius
            metus. Mauris consequat leo a sem pretium sodales. Cras facilisis porttitor
            ultrices. Sed ipsum metus, luctus sit amet blandit at, facilisis vel mauris.
            Morbi leo turpis, congue dignissim imperdiet eu, laoreet mattis turpis. 
            </p>
            <p>
            Etiam eu velit magna, et euismod ligula. Aenean non ligula at tortor accumsan
            blandit eget ut lacus. Vivamus commodo nunc egestas dolor sagittis rutrum
            egestas metus sagittis. Pellentesque mollis eros ut nisl auctor tincidunt. Cras
            ullamcorper ultricies arcu, id tincidunt ligula cursus eget. Ut accumsan, dolor
            et ultricies consequat, urna lacus blandit massa, nec vestibulum sapien sapien
            sed sem. Nunc mattis lorem ornare mauris viverra vel mattis mi euismod. Vivamus
            quis neque massa. Integer at est diam, vel molestie libero. Donec non ipsum non
            mauris posuere auctor. Quisque ac sapien sit amet diam elementum sagittis quis
            et urna. Maecenas adipiscing orci sed dui eleifend bibendum. 
            </p>
            <p>
            Suspendisse massa tortor, sagittis dignissim sodales vitae, porta id lorem.
            Aliquam at enim non libero consequat blandit. Nunc eleifend fermentum diam
            vitae condimentum. Aliquam molestie magna ut purus malesuada a rhoncus orci
            aliquet. Sed lacus ante, fringilla ut accumsan non, fermentum eu nibh.
            Phasellus quis nisi sem, at hendrerit eros. Proin faucibus sollicitudin
            tristique. Donec et velit magna. Sed eu dolor eu dui fermentum aliquet. Etiam
            sollicitudin egestas dui iaculis tempor. Aliquam quis mauris in augue luctus
            condimentum ut quis turpis. Donec porttitor, sapien non interdum dignissim,
            arcu nunc ullamcorper nisi, at sagittis enim nisi fringilla risus. Nulla vel
            ipsum nulla. Aliquam fringilla quam dapibus sapien mattis at ornare massa
            fringilla. Nullam sit amet lorem quis ipsum euismod imperdiet. 
            </p>
            <p>
            In hac habitasse platea dictumst. Fusce vitae urna id ipsum ornare molestie.
            Sed non urna in lectus tempor dictum non quis metus. Phasellus at dolor eget
            justo dapibus congue posuere nec dolor. Nunc hendrerit bibendum tincidunt.
            Vestibulum scelerisque enim nulla, venenatis sollicitudin dui. Donec feugiat
            condimentum velit, at ultrices felis sagittis elementum. Sed a massa massa,
            quis scelerisque sapien. Etiam non est felis, quis imperdiet diam. Aenean felis
            sapien, egestas blandit egestas non, imperdiet convallis risus. Nunc lacinia
            aliquet adipiscing. 
            </p>
            <p>
            Integer eu eleifend nulla. Duis elementum malesuada lectus at pretium. Praesent
            euismod nibh sit amet dui interdum nec interdum elit pretium. Vestibulum ante
            ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
            molestie est eu nisi rutrum blandit. Nulla non luctus purus. Fusce fringilla,
            dolor vel ultrices sagittis, quam purus aliquet urna, ac porta lectus velit ut
            mauris. Maecenas lectus magna, imperdiet sit amet iaculis a, vestibulum nec
            est. Sed tellus nibh, suscipit ut elementum vitae, venenatis placerat nibh.
            Pellentesque mattis convallis iaculis. Fusce mauris ipsum, ullamcorper id
            porttitor eu, luctus tincidunt lectus. Nulla facilisi. Aliquam erat mi, laoreet
            nec condimentum sed, pulvinar a massa. Integer eget orci lacus, ut dapibus
            arcu. Vivamus sollicitudin libero vitae libero ullamcorper interdum. Vivamus
            egestas dignissim eleifend.
            </p>
        </div>