Question

我必须将页面分为两部分，使用垂直线（有些像滑块，能够在页面上水平滚动）。我必须只在一侧执行一些功能。我不知道该怎么做。你能给我一些想法吗？

编辑： 应该是这样的

Answer 1

您可能正在寻找类似bg-splitter

的内容

或Angular JS resizable div directive

Answer 2

兄弟，无论你问什么都与角度无关。这将由overflow-y：auto;

的css属性完成

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    <style>
    #div1{width:600px;background:yellow;height:60px;}
    #div2{width:60%;background:green;overflow-y:auto;overflow-x:none;height:60px;}
    #div3{width:40%;background:pink;}
    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 

<div id="div1">
    <div id="div2">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div id="div3"></div>
</div>
    <script>
    //module declaration
    var app = angular.module('myApp', []);
    //controller declaration
    app.controller('myCtrl',function($scope){

        //code here
    });
    </script> 
</body> 
</html>

Answer 3

试试我刚创建的这个jsFiddle - ＆gt; https://jsfiddle.net/larsjueljens/tLq2t04a/8/

这基本上是三个div：

<div class="left">
  This is the left content
</div>
<div class="divider">
</div>
<div class="right">
  This is the right content
</div>

初始风格：

.left {
  position: fixed;
  top: 0px;
  left: 0px:
  width: 200px;
  bottom: 0px;
}

.divider {
  position:fixed;
  top: 0px;
  left: 200px;
  width: 20px;
  bottom: 0px;
  background-color: blue;
}

.right {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 220px;
  bottom: 0px;
}

Javascript代码：

var isMouseDown = false, 
        leftContent = document.querySelector('.left'),
        divider = document.querySelector('.divider'),
    rightContent = document.querySelector('.right');

divider.addEventListener('mousedown', function (event) {
    isMouseDown = true;
});

divider.addEventListener('mouseup', function (event) {
    isMouseDown = false;
});

divider.addEventListener('mousemove', function (event) {
    if (isMouseDown) {
    leftContent.style.width = (event.clientX - 10) + 'px';
    divider.style.left = (event.clientX - 10) + 'px';
    rightContent.style.left = (event.clientX + 10) + 'px';
  }
});

角度：创建可移动的垂直线

3 个答案: