相关疑难解决方法(0)

全页水平滚动问题

完整页面滚动的其他选择吗?

整页滚动的示例

http://jscrollpane.kelvinluck.com/fullpage_scroll.html

步骤1通过单击"还原"按钮使窗口宽度变小.

步骤2向右滚动

步骤3现在,通过单击最大化按钮使窗口宽度更大.

现在,页面左对齐

jQuery的

 $(function()
{
    var win = $(window);

    win.bind(
        'resize',
        function()
        {

                var container = $('#full-page-container');

                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );

                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane(
                    {
                        'showArrows': true
                    }
                );

        }
    ).trigger('resize');


    $('body').css('overflow', 'hidden');


    if ($('#full-page-container').width() != win.width()) {
        win.trigger('resize');
    }


});
Run Code Online (Sandbox Code Playgroud)

CSS

html
{
    overflow: auto;
}
#full-page-container
{
    overflow: auto;
}
Run Code Online (Sandbox Code Playgroud)

javascript jquery scroll jscrollpane

8
推荐指数
1
解决办法
922
查看次数

自定义Webkit滚动条按钮

我试图弄清楚如何使webkit滚动条按钮出现.我在Mac上的safari上测试这个.

我读了这些指南,但我不能为我的生活弄清楚如何得到一个简单的按钮,使它上下.我有一个我应该模仿的图像,但不知道如何.图像可以用作按钮吗?图像示例

!(http://oi62.tinypic.com/28kh76a.jpg)

http://css-tricks.com/custom-scrollbars-in-webkit/

到目前为止有这个..

::-webkit-scrollbar {  
width: 12px;  
}  

::-webkit-scrollbar-track {
background-color: #fff;  
}

::-webkit-scrollbar-thumb {  
background-color: #81CFCC;  
height: 10px;
Run Code Online (Sandbox Code Playgroud)

但不知道如何上下滚动按钮..或如何设置它们的样式.

html css webkit scrollbar

7
推荐指数
2
解决办法
2万
查看次数

如何使滚动条重叠页面内容

我想使滚动条与页面重叠.我想知道是否有办法用纯CSS做到这一点.我读了一篇关于使用CSS设置滚动条样式的文章(https://css-tricks.com/custom-scrollbars-in-webkit),但我没有得到我想要的结果.我认为可以使用一些具有固定位置的JavaScript和HTML元素来实现它,但我更喜欢使用CSS. 滚动条

html css webkit scrollbar

6
推荐指数
1
解决办法
4557
查看次数

使用CSS设置滚动条的样式

我尝试在线搜索,但我没有找到任何有用的资料.有没有办法用纯CSS设置滚动条样式,以便与最大数量的浏览器兼容?

css scrollbar css3

5
推荐指数
1
解决办法
2264
查看次数

我想改变水平滚动条CSS

我想改变水平滚动条CSS。在这里我使用代码来更改它,但它也更改了我的垂直滚动条,我只想更改水平滚动条。怎么做?在这里我也上传图片。

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

html css scrollbar

5
推荐指数
1
解决办法
1万
查看次数

如何在电子中自定义滚动条?

我知道如何使用 自定义滚动条::-webkit-scrollbar,我知道它的工作原理,因为我已经使用它制作了一些项目,但由于某种原因它似乎不适用于电子,我真的对此感到目瞪口呆,因为电子基于铬它应该有效。

无论如何,这些是我搜索并尝试过但没有用的一些解决方案

搜索到的解决方案 1

搜索到的解决方案数 2

解决方案搜索数 3

解决方案搜索数 4

解决方案搜索数 5

解决方案搜索编号 6

解决方案搜索编号 7

在过去的几个小时里,我搜索的内容不止这些,但这些是我记得最多的。

无论如何,这是我滚动条的 css 代码

::-webkit-scrollbar {
    width: 17px;
    height: 17px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: var(--scroll-bar-track-bg-color);
    opacity: 0.01;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scroll-bar-handle-bg-color);
    box-shadow: inset 0 0 6px var(--scroll-bar-handle-bg-color);
    -webkit-box-shadow: inset 0 0 6px var(--scroll-bar-handle-bg-color);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: var(--scroll-bar-track-bg-color);
}
Run Code Online (Sandbox Code Playgroud)

如果您想知道它是否是因为命名的 css 变量,我告诉您并非如此,因为我试图删除 css 变量并使用普通的十六进制代码甚至 rgb 代码来确定它不起作用的颜色。

我在这里真的很茫然,所以我希望任何人都可以帮助我,我看到答案说它适用于他们的项目,尝试过但它在我的项目中不起作用。

我已经读过,nodeIntegration: false但如果我这样做了,我的代码将会中断,因为我在我的项目中使用了 ipcMain 和 ipcRenderer

css scrollbar node.js electron

5
推荐指数
1
解决办法
1949
查看次数

自定义滚动条跨浏览器支持

在此输入图像描述
我正在尝试在 css 中创建自定义滚动条,但它不是跨浏览器,我想用 javascript 使其跨浏览器。滚动条不在 body 标签中。滚动条位于卡片盒(类别)中。这是屏幕截图:
单击此处查看屏幕截图
这是我的 html 代码:

<section class="quickSearch">
    <div class="quickSearchWrapper">
        <div class="container">
            <div class="quickSearch-header">
                <div class="fw-5">Quick Search</div>
                <a href="#">View All</a>
            </div>
            <div class="quickSearch-body">
                <div class="quickSearch-categories"> // Here is am placing overflow scrollbar 'x axis'
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Creative</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Landing Page</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">eCommerce</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Education</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Real …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery scrollbar

5
推荐指数
1
解决办法
8216
查看次数

Change color of Scrollbar in all browsers

I want to change color of scroll bar in all browser. My below style is not working in Mozila so please help me how to change color of the scroll bar in all browsers.

#boxes-list::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#boxes-list::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5!important;
}

#boxes-list::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)!important;
    background-color: #FFCC00!important;
}
Run Code Online (Sandbox Code Playgroud)

html css stylesheet

2
推荐指数
1
解决办法
1万
查看次数

如何在引导程序中更改滚动条样式?

我正在使用 bootstrap 4。我想知道是否有办法更改滚动条样式。我刚刚尝试使用 webkit 模式,但不起作用。

我看不到任何变化

css scrollbar

2
推荐指数
3
解决办法
3万
查看次数

自定义滚动条

在我的应用程序中,滚动条到来时它应该更改为自定义滚动条.在css中有任何方式来设置滚动条的样式.如果没有,请提供有关自定义滚动条的任何建议.

我曾经看过自定义滚动条的jquery插件,但是我需要更改自定义滚动条的每个位置.相反,有没有办法在一个地方进行更改会影响滚动条在我的应用程序中的所有位置.

html javascript jquery scrollbar custom-scrolling

1
推荐指数
1
解决办法
8700
查看次数

如何在css中更改滚动条样式

如何css在 chrome 或任何浏览器中更改滚动条样式或更改不同的 UI。我见过许多具有不同用户界面的网站。
这可以用css或来完成html吗?

html css google-chrome

1
推荐指数
1
解决办法
2万
查看次数