问

如何在不使用jQuery的情况下创建简单的页面垂直滚动条？

乐果Meng_501 发布于 2022-12-07 15:42

jquery

我看过我认为所有的滚动条代码,但还没有找到一个不使用jQuery或一个有点复杂的库的简单.

有人用javascript创建了自己的简单滚动条吗？我正在寻找的是一个如何做到这一点的例子.特别是我有一个简单的bootstrap网页:


    ....
    ......

我想要做的是,如果那里的内容大于适合单个页面,则该区域右侧会出现一个小的页面滚动条.出于样式目的,我希望这不是浏览器默认滚动条.

这是我正在寻找的一个例子但是这个使用jQuery所以我不能在我的网站上使用它:

http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

我正在寻找一些方法来使用现代浏览器IE9及更高版本中的 javascript .我认为这对许多人来说很有用,我为此开了一个200的赏金,希望有人可以提供一个可拖动的页面滚动条的好例子,它也会在页面内容区域上响应鼠标滚轮.

只是一个更新.我不是在寻找移动解决方案.我只是在寻找一种可以在PC/Mac浏览器中运行的解决方案.该网站未设置或适用于手机.可以在iPad或平板电脑上使用但是为了满足这些需求,我希望能够让滚动条默认只使用普通的平板电脑滚动方法.

1 个回答

令人惊讶的是,使用vanilla JavaScript并没有一个很好的简单解决方案.我制作了一个纯JS轻量级,最小的跨浏览器解决方案.根据自己的需求和美学进行调整

更新以包含可拖动滚动:
这是小提琴和CodePen

HTML

<body>
    <div id="main" class="scrollable">
        <div class="content-wrapper">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
            </div>
        </div>
    </div>
    <div>Not special and not contained within scrolling</div>
</body>

CSS

.scrollable {
    padding: 0% 10%;
    position: relative;
    border: 1px solid gray;
    overflow: hidden;
    height: 400px;
}

.scrollable.showScroll::after {
    position: absolute;
    content: '';
    top: 5%;
    right: 7px;
    height: 90%;
    width: 3px;
    background: rgba(224, 224, 255, .3);
}

.scrollable .content-wrapper {
    width: 100%;
    height: 100%;
    padding-right: 50%;
    overflow-y: scroll;
}
.scroller {
    z-index: 5;
    cursor: pointer;
    position: absolute;
    width: 10px;
    border-radius: 5px;
    background: rgb(111, 111, 190);
    top: 0px;
    right: 3px;
    -webkit-transition: top .08s;
    -moz-transition: top .08s;
    -ms-transition: top .08s;
    -o-transition: top .08s;
    transition: top .08s;
}
.content {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

(function () {

var scrollContainer = document.querySelector('.scrollable'),
    scrollContentWrapper = document.querySelector('.scrollable .content-wrapper'),
    scrollContent = document.querySelector('.scrollable .content'),
    contentPosition = 0,
    scrollerBeingDragged = false,
    scroller,
    topPosition,
    scrollerHeight;

function calculateScrollerHeight() {
    // *Calculation of how tall scroller should be
    var visibleRatio = scrollContainer.offsetHeight / scrollContentWrapper.scrollHeight;
    return visibleRatio * scrollContainer.offsetHeight;
}

function moveScroller(evt) {
    // Move Scroll bar to top offset
    var scrollPercentage = evt.target.scrollTop / scrollContentWrapper.scrollHeight;
    topPosition = scrollPercentage * (scrollContainer.offsetHeight - 5); // 5px arbitrary offset so scroll bar doesn't move too far beyond content wrapper bounding box
    scroller.style.top = topPosition + 'px';
}

function startDrag(evt) {
    normalizedPosition = evt.pageY;
    contentPosition = scrollContentWrapper.scrollTop;
    scrollerBeingDragged = true;
}

function stopDrag(evt) {
    scrollerBeingDragged = false;
}

function scrollBarScroll(evt) {
    if (scrollerBeingDragged === true) {
        var mouseDifferential = evt.pageY - normalizedPosition;
        var scrollEquivalent = mouseDifferential * (scrollContentWrapper.scrollHeight / scrollContainer.offsetHeight);
        scrollContentWrapper.scrollTop = contentPosition + scrollEquivalent;
    }
}

function createScroller() {
    // *Creates scroller element and appends to '.scrollable' div
    // create scroller element
    scroller = document.createElement("div");
    scroller.className = 'scroller';

    // determine how big scroller should be based on content
    scrollerHeight = calculateScrollerHeight();

    if (scrollerHeight / scrollContainer.offsetHeight < 1){
        // *If there is a need to have scroll bar based on content size
        scroller.style.height = scrollerHeight + 'px';

        // append scroller to scrollContainer div
        scrollContainer.appendChild(scroller);

        // show scroll path divot
        scrollContainer.className += ' showScroll';

        // attach related draggable listeners
        scroller.addEventListener('mousedown', startDrag);
        window.addEventListener('mouseup', stopDrag);
        window.addEventListener('mousemove', scrollBarScroll)
    }

}

createScroller();


// *** Listeners ***
scrollContentWrapper.addEventListener('scroll', moveScroller);
}());

这个概念很简单.我们有一个带有'可滚动'类的主div.JavaScript识别此元素并附加一个滚动条div,您可以使用CSS自行设置样式.通过嵌套content-wrapper子div,我们可以有效地将本机滚动器推送到父div之外,同时仍然控制填充.

这是一个图表: 滚动图

我们需要保持原生滚动功能的原因是因为JavaScript滚动事件仅触发已设置为滚动的溢出的元素.有关滚动,请参阅MDN参考.好处是,如果JS被禁用,我们仍然可以优雅地回退到没有滚动条的滚动.

注意
您应注意,在某些情况下,您必须调整版本以重新计算滚动条大小:
1.)屏幕大小调整或
2.)如果附加了更多内容.

其次,如果您有多个"可滚动"元素,则必须进行修改.在这种情况下,您需要遍历这些元素以附加一个滚动条div并监听滚动事件.

2022-12-11 03:11 回答

泉州联合网2534

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签