Question

我的视图中有一个div html元素，其中包含3个子div元素，我设计它在同一行显示sub div元素（彼此不在彼此之下），每个子div element包含一些控件，每个sub div元素都有一个固定的宽度。

我想在页面中设置一个按钮，当用户点击该按钮时，它会触发主div元素的水平滚动并将其滚动到某个位置。

我该怎么做？。如果可以使用Javascript或Jquery完成它会更好，但如果有任何其他解决方案，那就好了。

如果问题中有任何需要澄清的内容，请告诉我。

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
       .container div {
  width: 20%;
  height: 200px;
  background: red;
  float: left;
}
#two {
  background: yellow;
}
#three {
  background: violet;
}
.container {
  height: 100%;
  width: 4000px;
}
#button-container {
  position: fixed;
  bottom: 20px;
  left: 40px;
}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        $('body').on('click', 'button', function () {
            var target = '#' + this.id.split('-')[1]
            var offsetLeft = $(target).offset().left
            $('body').animate({
                scrollLeft: offsetLeft
            }, '500');
        })
     
    </script>
    <title></title>
	<meta charset="utf-8" />

   
    
</head>
<body>

    <div class="container">
        <div id="one">hello</div>
        <div id="two">hello</div>
        <div id="three">hello</div>
    </div>

    <div id="button-container">
        <button id="scroll-one">Scroll to div 1</button>
        <button id="scroll-two">Scroll to div 2</button>
        <button id="scroll-three">Scroll to div 3</button>
    </div>

</body>
</html>

Answer 1

试试这个。

使用scrollLeft()水平滚动。希望它有所帮助

＆＃13;

$('body').on('click', 'button', function() {
  var target = '#' + this.id.split('-')[1]
  var offsetLeft = $(target).offset().left
  $('body').animate({
    scrollLeft: offsetLeft
  }, '500');
})

＆＃13;

.container div {
  width: 20%;
  height: 200px;
  background: red;
  float: left;
}
#two {
  background: yellow;
}
#three {
  background: violet;
}
.container {
  height: 100%;
  width: 4000px;
}
#button-container {
  position: fixed;
  bottom: 20px;
  left: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="one">hello</div>
  <div id="two">hello</div>
  <div id="three">hello</div>
</div>

<div id="button-container">
  <button id="scroll-one">Scroll to div 1</button>
  <button id="scroll-two">Scroll to div 2</button>
  <button id="scroll-three">Scroll to div 3</button>
</div>

＆＃13;

<强> [UPDATE]

整个代码！

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style type="text/css">
    .container div {
      width: 20%;
      height: 200px;
      background: red;
      float: left;
    }
    #two {
      background: yellow;
    }
    #three {
      background: violet;
    }
    .container {
      height: 100%;
      width: 4000px;
    }
    #button-container {
      position: fixed;
      bottom: 20px;
      left: 40px;
    }
  </style>
  <title></title>
  <meta charset="utf-8" />



</head>

<body>

  <div class="container">
    <div id="one">hello</div>
    <div id="two">hello</div>
    <div id="three">hello</div>
  </div>

  <div id="button-container">
    <button id="scroll-one">Scroll to div 1</button>
    <button id="scroll-two">Scroll to div 2</button>
    <button id="scroll-three">Scroll to div 3</button>
  </div>
  <script>
    $('body').on('click', 'button', function() {
      var target = '#' + this.id.split('-')[1]
      var offsetLeft = $(target).offset().left
      $('body').animate({
        scrollLeft: offsetLeft
      }, '500');
    })
  </script>
</body>

</html>

HTML

1 个答案: