如何在移动视图中点击箭头时向左和向右滚动内容？ [英] How to scroll the content in the left and right direction on hitting an arrow in mobile view?

查看：183
本文介绍了如何在移动视图中点击箭头时向左和向右滚动内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个

解决方案

对于你的问题你需要一些东西


  1. 设置两个按钮来设置代码中的监听器

  2. 获取初始位置，以便计算幻灯片



    让divMain = $（'。product-all-contents'）[0];
    让position = $（divMain）.children（）。position（）。left;
    const slideAmount = 150;


这3个变量将是代码的主要值


  1. 最后为幻灯片制作听众



    $ （'＃arrow-right'）。click（function（）{
    $（divMain）.animate（{
    scrollLeft：position + slideAmount
    }，500）;
    position + = slideAmount;
    }）


希望这会有所帮助：> 

  $（document）.ready（function（）{let divMain = $（'。product-all-contents'）[0]; let position = $（ divMain）.children（）。position（）。left; const slideAmount = 150; $（'＃arrow-right'）。click（function（）{$（divMain）.animate（{scrollLeft：position + slideAmount}，500 ）; position + = slideAmount;}）$（'＃arrow-left'）。click（function（）{$（divM） ain）.animate（{scrollLeft：position  -  slideAmount}，500）; position  -  = slideAmount; }）};  

  .product-all-contents { background-color：＃f0f0f0;宽度：70％; margin：auto;}。product-contents {display：flex;辩解内容：空间 - 间隔; align-items：center; padding：1rem;}。product-contents .product {width：10％; text-align：center;身高：150px; padding-top：1％; padding-left：1％; padding-right：1％;边框式：坚固; border-width：3px; border-color：rgb（145,147,150）;背景颜色：白色; border-radius：10px} .ipads {display：flex;辩解内容：空间 - 间隔; align-items：center; padding：1rem;}。tvs {display：flex;辩解内容：空间 - 间隔; align-items：center; padding：1rem;}。特许经营 -  hub-text，.cloud-based-text，.business-analytics-text，.tech-support-text，.order-management-text，.employee-management-text，.white-标签文字。品牌标签的文本，.lead跟踪文本，.custom发票文本，.goal设定文本，.customization工具文本，.royalty计算器，文本，.email营销-text {width：50％;} div.goal-setting，div.customization-tools，div.custom-invoicing，div.lead-tracking，div.email-marketing，div.royalty-calculator，div.brand-control ，div.franchisehubtv，div.cloudbasedtextipad，div.business-analytics，div.tech-support，div.employee-management，div.order-management，div.white-label {display：flex; margin-left：15％;保证金权利：15％; align-items：center; background-color：＃f0f0f0;填充：2％; margin-bottom：5％;}。product-quotes {display：block;填充：20px 11px;宽度：90％;颜色：＃3b3b3d;背景：白色; border-radius：2px;行高：1.625; font-family：'Roboto'; font-weight：normal; } .arrow-down {width：0; height：0; margin：auto; border-left：40px solid transparent; border-right：40px solid transparent; border-top：40px solid＃f0f0f0;}。white {display： none;} @ media only screen and（max-width：767px）{。product-all-contents {overflow-x：auto;} .product-contents .product {min-width：50.795％; margin：0 2％; padding-top：3.91％; padding-left：3.91％; padding-right：3.91％;}} @ media only screen and（max-width：767px）{div.goal-setting，div.customization-tools，div。自定义发票，div.lead-tracking，div.email-marketing，div.royalty-calculator，div.brand-control，div.franchisehubtv，div.cloudbasedtextipad，div.business-analytics，div.tech-support，div。 employee-management，div.order-management，div.white-label {display：inline-block！important;}} @ media only screen and（max-width：767px）{。franchise-hub-text，.cloud-based -text，.business-analytics-text，.tech-support-text，.order-management-text，.employee-manage文本，.white-label-text，.brand-control-text，.lead-tracking-text，.custom-invoicing-text，。goal-setting-text，.customization-tools-text，.royalty-calculator -text，.email-marketing-text {width：100％; }  

 <！doctype html>< html> < HEAD> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> <标题>测试和LT; /标题> < link rel =stylesheethref =sample.css> < script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> < script type =text / javascriptsrc =script / myscript.js>< / script>< / head>< body> < div class =product-all-contents> < div class =product-contents> < div class =productid =franchisehub> < p style =font-size：15px; font-family：'Roboto'; margin-left：7％; margin-right：7％; line-height：1.2; margin-top：20％; color：rgb （58,59,60）;> A< / p> < / DIV> < div class =productid =cloudbasedmobilestyle =background-color：＃81bf44;> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：27％; color：white;> Z< / p> < / DIV> < div class =productid =businessanalytics> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：22％; color：rgb（58,59,60）;> B< / p为H. < / DIV> < div class =productid =techsupport> < p style =font-size：15px; font-family：'Roboto'; margin-right：9％; line-height：1.2; margin-left：9％; margin-top：22％; color：rgb （58,59,60）;> C< / p> < / DIV> < div class =productid =ordermanagement> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：23％; color：rgb（58,59,60）;> D< / p为H. < / DIV> < div class =productid =employeemanagement> < p style =font-size：15px; font-family：'Roboto';行高：1.2; margin-left：5％; margin-top：27％; color：rgb（58,59,60） ;> E< / p为H. < / DIV> < div class =productid =whitelabel> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-left：14％; margin-right：14％; margin-top：8％; color：rgb （58,59,60）;> M< / p> < / DIV> < / DIV> < div class =product-contents> < div class =productid =brandcontrol> < p style =font-size：15px; font-family：'Roboto'; margin-left：8％; line-height：1.2; margin-right：8％; margin-top：20％; color：rgb （58,59,60）;> F< / p> < / DIV> < div class =productid =leadtracking> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-left：5％; margin-right：5％; margin-top：26％; color：rgb （58,59,60）;> G< / p> < / DIV> < div class =productid =custominvoicing> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：24％; color：rgb（58,59,60）;> K< / p为H. < / DIV> < div class =productid =goalsetting> < p style =font-size：15px; font-family：'Roboto'; margin-right：13％; margin-left：13％; line-height：1.2; margin-top：24％; color：rgb （58,59,60）;> H< / p> < / DIV> < div class =productid =customizationtools> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：22％; color：rgb（58,59,60）;> I< / p为H. < / DIV> < div class =productid =royaltycalculator> < p style =font-size：15px; font-family：'Roboto';行高：1.2; margin-left：5％; margin-top：23％; color：rgb（58,59,60） ;> J< / p为H. < / DIV> < div class =productid =emailmarketing> < p style =font-size：15px; font-family：'Roboto'; margin-left：5％; margin-right：5％; line-height：1.2; margin-top：21％; color：rgb （58,59,60）;> K< / p> < / DIV> < / DIV> < / DIV> < button id =arrow-left>&＃60 ----< / button> < button id =arrow-right> ----&＃62< / button>< / body>< / html>


I have a fiddle which is working in a way that when I take it in the mobile view, the square boxes horizontally scroll.

The CSS codes which I have used for that are:

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
  min-width: 50.795%;
  margin: 0 2%;
  padding-top: 3.91%;
  padding-left: 3.91%;    
  padding-right: 3.91%;
  }
}


Problem Statement:

I am wondering what changes I should make in the fiddle so that when I hit arrows in the mobile view (as shown in the screenshot below marked by orange arrow sign) the content move towards the left and vice-versa.

I think best solution will be jQuery, scrollLeft() and scrollRight() but I am not sure how I can implement it in the fiddle.

解决方案

For your problem you need a few things

  1. Set two buttons to set the listeners in your code

  2. Get the initial position so you can calculate the slide

    let divMain = $('.product-all-contents')[0]; let position = $(divMain).children().position().left; const slideAmount = 150;

This 3 variables will be the main values for the code

  1. Last make the listenes for the slide

    $('#arrow-right').click(function() { $(divMain).animate({ scrollLeft: position + slideAmount }, 500); position += slideAmount; })

Hope this helps :> 

$(document).ready(function() {
  let divMain = $('.product-all-contents')[0];
  let position = $(divMain).children().position().left;
  const slideAmount = 150;

  $('#arrow-right').click(function() {
    $(divMain).animate({
      scrollLeft: position + slideAmount
    }, 500);
    position += slideAmount;
  })

  $('#arrow-left').click(function() {
    $(divMain).animate({
      scrollLeft: position - slideAmount
    }, 500);
    position -= slideAmount;
  })
});

.product-all-contents {
  background-color: #f0f0f0;
  width: 70%;
  margin: auto;
}

.product-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.product-contents .product {
  width: 10%;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}

.ipads {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.tvs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.franchise-hub-text,
.cloud-based-text,
.business-analytics-text,
.tech-support-text,
.order-management-text,
.employee-management-text,
.white-label-text,
.brand-label-text,
.lead-tracking-text,
.custom-invoicing-text,
.goal-setting-text,
.customization-tools-text,
.royalty-calculator-text,
.email-marketing-text {
  width: 50%;
}

div.goal-setting,
div.customization-tools,
div.custom-invoicing,
div.lead-tracking,
div.email-marketing,
div.royalty-calculator,
div.brand-control,
div.franchisehubtv,
div.cloudbasedtextipad,
div.business-analytics,
div.tech-support,
div.employee-management,
div.order-management,
div.white-label {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.product-quotes {
  display: block;
  padding: 20px 11px;
  width: 90%;
  color: #3b3b3d;
  background: white;
  border-radius: 2px;
  line-height: 1.625;
  font-family: 'Roboto';
  font-weight: normal;
  "

}

.arrow-down {
  width: 0;
  height: 0;
  margin: auto;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #f0f0f0;
}

.white {
  display: none;
}

@media only screen and (max-width: 767px) {
  .product-all-contents {
    overflow-x: auto;
  }
  .product-contents .product {
    min-width: 50.795%;
    margin: 0 2%;
    padding-top: 3.91%;
    padding-left: 3.91%;
    padding-right: 3.91%;
  }
}

@media only screen and (max-width: 767px) {
  div.goal-setting,
  div.customization-tools,
  div.custom-invoicing,
  div.lead-tracking,
  div.email-marketing,
  div.royalty-calculator,
  div.brand-control,
  div.franchisehubtv,
  div.cloudbasedtextipad,
  div.business-analytics,
  div.tech-support,
  div.employee-management,
  div.order-management,
  div.white-label {
    display: inline-block !important;
  }
}

@media only screen and (max-width: 767px) {
  .franchise-hub-text,
  .cloud-based-text,
  .business-analytics-text,
  .tech-support-text,
  .order-management-text,
  .employee-management-text,
  .white-label-text,
  .brand-control-text,
  .lead-tracking-text,
  .custom-invoicing-text,
  .goal-setting-text,
  .customization-tools-text,
  .royalty-calculator-text,
  .email-marketing-text {
    width: 100%;
  }
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Testing</title>
  <link rel="stylesheet" href="sample.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="script/myscript.js"></script>

</head>

<body>

  <div class="product-all-contents">
    <div class="product-contents">
      <div class="product" id="franchisehub">

        <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; margin-top: 20%;
         color: rgb(58, 59, 60);">A</p>
      </div>

      <div class="product" id="cloudbasedmobile" style="background-color:#81bf44;">

        <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 27%;
         color:white;">Z</p>
      </div>
      <div class="product" id="businessanalytics">

        <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 22%;
         color: rgb(58, 59, 60);">B</p>
      </div>
      <div class="product" id="techsupport">

        <p style=" font-size: 15px;
         font-family: 'Roboto';
         margin-right: 9%;
         line-height: 1.2;
         margin-left: 9%; margin-top: 22%;
         color: rgb(58, 59, 60);">C</p>
      </div>

      <div class="product" id="ordermanagement">

        <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 23%;
         color: rgb(58, 59, 60);">D</p>
      </div>

      <div class="product" id="employeemanagement">
        <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 27%;
         color: rgb(58, 59, 60);">E</p>
      </div>
      <div class="product" id="whitelabel">
        <p style="
         font-size: 15px;
         font-family: 'Roboto';
         line-height:1.2;
         margin-left: 14%;
         margin-right: 14%; margin-top: 8%;
         color: rgb(58, 59, 60);
         ">M</p>
      </div>
    </div>
    <div class="product-contents">
      <div class="product" id="brandcontrol">

        <p style="
         font-size: 15px;
         font-family: 'Roboto';
         margin-left: 8%;
         line-height:1.2;
         margin-right: 8%; margin-top: 20%;
         color: rgb(58, 59, 60);
         ">F</p>
      </div>
      <div class="product" id="leadtracking">

        <p style="
         font-size: 15px;
         font-family: 'Roboto';
         line-height:1.2;
         margin-left: 5%;
         margin-right: 5%; margin-top: 26%;
         color: rgb(58, 59, 60);
         ">G</p>
      </div>
      <div class="product" id="custominvoicing">

        <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 24%;
         color: rgb(58, 59, 60);">K</p>
      </div>
      <div class="product" id="goalsetting">

        <p style="font-size: 15px;
         font-family: 'Roboto';
         margin-right: 13%;
         margin-left: 13%;
         line-height: 1.2; margin-top: 24%;
         color: rgb(58, 59, 60);">H</p>
      </div>
      <div class="product" id="customizationtools">

        <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 22%;
         color: rgb(58, 59, 60);">I</p>
      </div>
      <div class="product" id="royaltycalculator">

        <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 23%;
         color: rgb(58, 59, 60);">J</p>
      </div>
      <div class="product" id="emailmarketing">

        <p style="
         font-size: 15px;
         font-family: 'Roboto';
         margin-left: 5%;
         margin-right: 5%;
         line-height:1.2; margin-top: 21%;
         color: rgb(58, 59, 60);
         ">K</p>
      </div>
    </div>
  </div>




  <button id="arrow-left">&#60----</button>

  <button id="arrow-right">----&#62</button>








</body>

</html>

这篇关于如何在移动视图中点击箭头时向左和向右滚动内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆