制作一个按钮在div中水平滚动 [英] make a button to scroll horizontally in div

问题描述

感谢您阅读我的问题.

我有一个网站，其中有一个带有图像的 div，设置为溢出:自动；空白:nowrap；因此，您可以在 div 中水平滚动以查看其中的所有图像.我的问题.我可以制作两个按钮(左和右)来水平滚动这个 div.我问这个是因为当我有触摸屏或触控板时，我可以在 div 中滚动，但是当我在只有鼠标的桌面上时，没有滚动 div 的选项.我听说你想只使用滚动条，但我已经隐藏了那些使用 css 的，因为它们在不同的计算机和浏览器上看起来不同，而且只是一个完全的痛苦，对我来说看起来不够干净.这是我的网站(我做了一个页面，我再次解释了这个问题.)https://tuberadar.nl/test1234/

感谢您阅读我的问题.

祝您有美好的一天！

我关注了 carousel 插件，但想知道是否有使用 css 的方法.

 .blackbackgroundscroll {背景:#fff;填充:8px 8px 8px 8px；边距:12px 0px 5px 0px；box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);边框:1px 实心 #dadce0;边框左上角半径:2px；边框右上角半径:2px；边框右下角半径:2px；边框左下角半径:2px；溢出:自动；空白:nowrap；-webkit-overflow-scrolling:触摸；}

我不知道从哪里开始，因为我也觉得这需要一些 Javascript 并且我没有 JS 经验.

解决方案

您可以使用 Element.scrollLeft 属性滚动以整数值提供滚动量.

这是一个基本示例:JavaScript + CSS + HTML

 const buttonRight = document.getElementById('slideRight');const buttonLeft = document.getElementById('slideLeft');buttonRight.onclick = 函数 () {document.getElementById('container').scrollLeft += 20;};buttonLeft.onclick = 函数 () {document.getElementById('container').scrollLeft -= 20;};

 #container {宽度:145px；高度:100px；边框:1px 实心 #ccc；溢出-x:滚动；}#内容 {宽度:250px；背景颜色:#ccc；}

 
<div id="content">点击按钮可以水平滑动！</div>
<button id="slideLeft" type="button">向左滑动</button><button id="slideRight" type="button">向右滑动</button>

Thank you for reading my question.

I have a website where i have a div with images in it, set to overflow:auto; white-space: nowrap; So you can scroll horizontally in the div to see all the images in it. My question. Can i make two buttons (left and right) to scroll this div horizontally. I ask this because when i have a touchscreen or trackpad i can scroll in the div but when i am on a desktop with only a mouse there is no option to scroll the div. And i hear you thinking just use the scrollbar but i have hidden those using css because they look different on different computers and browsers and were just a complete pain and didnt look clean enough for me. Here is my site (i made a page where i explain the problem again.) https://tuberadar.nl/test1234/

Thank you for reading my question.

Have a nice day!

I have watched for carousel plugins but want to know if there's a way with css.

    .blackbackgroundscroll {
     background: #fff;
     padding: 8px 8px 8px 8px;
     margin: 12px 0px 5px 0px;
     box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);
     border: 1px solid #dadce0;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px;
     border-bottom-left-radius: 2px;
     overflow: auto;
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
     }

I have no idea where to start, because i also have the feeling this is going to need some Javascript and i have no experience with JS.

解决方案

You can scroll using Element.scrollLeft property to which you can provide the amount to scroll as an integer value.

Here is a basic example: JavaScript + CSS + HTML

    const buttonRight = document.getElementById('slideRight');
    const buttonLeft = document.getElementById('slideLeft');

    buttonRight.onclick = function () {
      document.getElementById('container').scrollLeft += 20;
    };
    buttonLeft.onclick = function () {
      document.getElementById('container').scrollLeft -= 20;
    };

    #container {
      width: 145px;
      height: 100px;
      border: 1px solid #ccc;
      overflow-x: scroll;
    }

    #content {
      width: 250px;
      background-color: #ccc;
    }

    <div id="container">
      <div id="content">Click the buttons to slide horizontally!</div>
    </div>
    <button id="slideLeft" type="button">Slide left</button>
    <button id="slideRight" type="button">Slide right</button>

这篇关于制作一个按钮在div中水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！