wordpress 自定义_如何在WordPress中添加自定义滚动条

wordpress 自定义

Do you want to add a custom scrollbar in WordPress? Changing the appearance of scrollbar can help you stand out specially when making a custom theme for your website.

您要在WordPress中添加自定义滚动条吗？ 更改滚动条的外观可以帮助您在为网站创建自定义主题时特别突出。

In this article, we will show you how to easily add a custom scrollbar in WordPress. We will show you two solutions and you can choose one that works best for you.

在本文中，我们将向您展示如何在WordPress中轻松添加自定义滚动条。 我们将向您展示两种解决方案，您可以选择一种最适合您的解决方案。

自定义滚动条颜色的问题 (Issues with Custom Scrollbar Colors)

By default, CSS does not come with a ruleset that would let you change scrollbar properties. There are some proposals to add this, but they are not supported by most browsers at the moment.

默认情况下，CSS不附带允许您更改滚动条属性的规则集。 有一些建议可以添加此内容，但是目前大多数浏览器都不支持它们。

To overcome this, designers and developers use browser-specific pseduo elements or JavaScript to override default scrollbar appearance.

为了克服这个问题，设计人员和开发人员使用特定于浏览器的pseduo元素或JavaScript覆盖默认的滚动条外观。

We will show you both techniques. However, keep in mind that you must test your site with different browsers and devices to ensure it works properly on all browsers.

我们将向您展示这两种技术。 但是，请记住，必须使用不同的浏览器和设备测试站点，以确保其在所有浏览器上都能正常运行。

That being said, let’s take a look at how to add custom scrollbar colors in WordPress.

话虽如此，让我们看一下如何在WordPress中添加自定义滚动条颜色。

方法1.在WordPress中使用插件添加自定义滚动条 (Method 1. Add a Custom Scrollbar in WordPress with a Plugin)

This method is easier and recommended for most users. However, it does not support mobile browsers.

此方法更简单，建议大多数用户使用。 但是，它不支持移动浏览器。

First, thing you need to do is install and activate the Advanced Scrollbar plugin. For more details, see our step by step guide on how to install a WordPress plugin.

首先，您需要做的是安装并激活Advanced Scrollbar插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to head over to Settings » Custom Color Scrollbar Settings page to configure plugin.

激活后，您需要转到“设置”»“自定义颜色滚动条设置”页面来配置插件。

From here, you can change the scrollbar color and the scrollbar rail background colors. You can then select the mouse scroll step, which is the scrolling speed of the mouse wheel.

在这里，您可以更改滚动条颜色和滚动条导轨背景颜色。 然后，您可以选择鼠标滚动步骤，即鼠标滚轮的滚动速度。

You can also select whether you want to auto-hide the scrollbar or always display it.

您还可以选择是要自动隐藏滚动条还是始终显示它。

You have the option choose ‘Cursor only’ option which would display the scrollbar rail but not the button.

您可以选择“仅光标”选项，该选项将显示滚动条，但不显示按钮。

Below that, you will find options to set the scroll speed, change rail alignment (left or right), and enable touch behavior.

在其下，您将找到用于设置滚动速度，更改导轨对齐(向左或向右)以及启用触摸行为的选项。

Don’t forget to click on the save changes button to store your settings.

不要忘记单击“保存更改”按钮来存储您的设置。

You can now visit your website to see your custom scrollbar colors in action.

现在，您可以访问您的网站以查看自定义滚动条的颜色。

方法2.使用CSS在WordPress中添加自定义滚动条颜色 (Method 2. Add Custom Scrollbar Colors in WordPress using CSS)

This method uses CSS to style your scrollbar, which is faster than using jQuery.

此方法使用CSS设置滚动条的样式，这比使用jQuery更快。

However, it only works on desktop browsers using WebKit rendering engine like Google Chrome, Safari, Opera, and more.

但是，它仅适用于使用WebKit呈现引擎的桌面浏览器，例如Google Chrome，Safari，Opera等。

It will not have any effect on mobile browsers or Firefox and Edge on desktop computers.

它不会对移动浏览器或台式机上的Firefox和Edge产生任何影响。

You will need to add the following custom CSS to your WordPress theme.

您需要将以下自定义CSS添加到WordPress主题中 。

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ffb400; 
	border:1px solid #ccc;
}

::-webkit-scrollbar-thumb {
  background: #cc00ff; 
	border:1px solid #eee;
	height:100px;
	border-radius:5px;
}

::-webkit-scrollbar-thumb:hover {
  background: blue; 
}

Feel free to change colors and other CSS properties.

随时更改颜色和其他CSS属性。

Once you are satisfied, don’t forget to save your changes. After that, you can preview it in a supported browser.

满意后，请不要忘记保存更改。 之后，您可以在受支持的浏览器中预览它。

This is how it looked on our demo website while viewing on Google Chrome on a Mac computer.

这是在Mac计算机上的Google Chrome浏览器上观看演示网站时的样子。

We hope this article helped you learn how to add a custom scrollbar in WordPress. You may also want to see our guide on how to easily create a custom WordPress theme without writing any code.

我们希望本文能帮助您学习如何在WordPress中添加自定义滚动条。 您可能还想查看我们的指南， 该指南介绍如何轻松创建自定义WordPress主题而无需编写任何代码。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-a-custom-scrollbar-in-wordpress/

wordpress 自定义